angularjs – ng-if在transcluded范围内打破范围继承

这个小提琴说明了问题 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;
        }
    }
});

它应该创建两个范围：

>指令隔离范围有两个变量 – 标题和可见
> Transcluded范围,原型继承自“常规”范围树.

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

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

UPDATE

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

解决方法

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