angularjs - ng-if 在嵌入作用域中破坏作用域继承

Question

那个 fiddle 说明了这个问题 http://jsfiddle.net/LAqeX/2/

我想创建一个指令来包装页面的一部分并将其隐藏。我想使用 ng-if 来删除不必要的绑定(bind)。但是会发生一些黑魔法。

这是我更喜欢的指令代码。

app.directive('withIf', function(){
    return {
        restrict: 'E',
        scope: {
            title: '@'
        },
        transclude: true,
        template: '<div>' +
        '<p ng-click="visible = !visible">{{title}}</p>' +
        '<div ng-if="visible" ng-transclude></div>'+
        '</div>',
        link: function(scope){
            scope.visible = false;
        }
    }
});

它应该创建两个范围:

具有两个变量的指令隔离范围 - 标题和可见

原型(prototype)继承自“常规”作用域树的嵌入作用域。

但是，ng-if 使 transcluded 范围与现实有些脱离，并且 transcluded 范围不继承自 Controller 。请看 fiddle ，它非常清楚地说明了这个问题。

任何想法那里发生了什么以及如何解决它？

更新

看来我已经找到了作用域链看起来损坏的原因。 ng-if 创建的作用域属于 withIf 指令的isolate 分支。所以它永远不知道 Controller 的范围甚至存在。但问题仍然是一样的——在这种情况下如何使用 ng-if。

Answer 1

ng-if 创建子作用域，使用 $parent从父范围访问变量。但在你的情况下，我会考虑使用 ng-show 或 ng-hide 而不是 ng-if (他们不创建子范围)