那个小提琴说明了这个问题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;
}
}
});
它应该创建两个范围：
- 具有两个变量的指令隔离范围 - 标题和可见
- 原型继承自“常规”作用域树的嵌入作用域。
但是，ng-if 使 transcluded 范围与现实有些脱离，并且 transcluded 范围不继承自控制器。请看小提琴，它非常清楚地说明了这个问题。
任何想法那里发生了什么以及如何解决它？
更新
看来我已经找到了作用域链看起来损坏的原因。ng-if 创建的作用域属于 withIf 指令的isolate 分支。所以它永远不知道控制器的范围甚至存在。但问题仍然是一样的——在这种情况下如何使用 ng-if。