在transcluded范围内的ng-if会破坏范围继承

Question

这个小提琴说明了问题http://jsfiddle.net/LAqeX/2/

我想创建一个包含页面一部分并隐藏它的指令.我想使用ng-if删除不必要的绑定.但是一些黑魔法发生了.

这是我最喜欢的指令代码.

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;
        }
    }
});

它应该创建两个范围:

1. 指令隔离范围有两个变量 - 标题和可见
2. Transcluded范围,原型继承自"常规"范围树.

然而,ng-if使得被转移的范围有点脱离现实,并且trasncluded范围不会从控制器继承.请看小提琴,它说明问题非常明确.

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

UPDATE

我似乎已经找到了范围链看起来破碎的原因.由ng-if创建的范围属于withIf指令isolate分支.所以它永远不知道控制器的范围是否存在.但问题仍然是相同的 - 如何在这种情况下使用ng-if.

Answer 1

ng-if 创建一个子作用域，用于$parent访问父作用域中的变量。但在你的情况下，我会考虑使用 ng-show 或 ng-hide 而不是 ng-if （它们不创建子范围）