Angularjs - ng-if - 绕过/解决范围逻辑

Question

我知道使用ng-if指示ng-if破坏了元素的范围,这与使用ng-show或ng-hide不同.但是我需要使用ng-if(ng-show/hide不是选项)因为我实际上需要在ng-if错误地在页面上不呈现元素.

我使用ng-if作为指令模板的一部分..

我的指示

app.directive("myDirective", function ($parse) {
return {
    restrict: "E",
    scope:{},
    controller: function ($scope, $element, $attrs) {
        // controller code
    },
    templateUrl: "template.html",
    compile: function(elm, attrs){
        var expFn = $parse(attrs.atr1 + '.' + attrs.atr2);
            return function(scope,elm,attrs){

                scope.$parent.$watch(expFn, function(val){
                    scope.exp = val;
                })

                scope.$watch('exp', function(val){
                    expFn.assign(scope.$parent, val)
                })
            }
    }
}
})

我的模板

<div ng-click="view = !view">{{exp}}</div>

<div ng-if="view">

    <input type="text" ng-model="exp"><br/>

    <div class="btn btn-default" ng-click="Submit()">Submit</div>

</div>

有没有办法"绕过"ng-if行为,,,保持范围,或重新创建它？

Answer 1

我为此创建了attach-if指令.

该代码可在https://github.com/Sparks-Creative-Limited/angular-attach-if获得,如果您使用bower,它已注册为可下载组件,其中包含以下详细信息:

angular-attach-if 0.1.0

还有一个演示页面,展示它是如何工作的.