2014-03-03 55 views
6

那捣鼓说明问题http://jsfiddle.net/LAqeX/2/NG-如果transcluded范围破坏范围继承

我想创建一个包装的页面的一部分,它隐藏了一个指令。我想用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范围由prototypically从“常规”范围树继承。

但是,ng-if使得transclued作用域与现实有些分离,而trasncluded作用域并不从控制器继承。请看小提琴,这个问题很清楚。

任何想法发生了什么,以及如何解决它?

UPDATE

看来我也想通了,原因作用域链看起来破碎。由ng-if创建的范围属于withIf指令隔离分支。所以它从不知道控制器的范围甚至存在。但是问题依然如此 - 如何在这种情况下使用ng-if。

+0

不ng-if创建隔离范围,更具体地说? – frishi

+0

它的确如此,但我没有想到它会打破应该是文学上的$ parent的transcluded范围继承。这在Angular 1.3中是固定的,所以如果你有类似的问题就升级。 –

+0

我确实有类似的问题,并使用ng-show解决它。由于我正在使用的应用程序的大小,升级不是一个选项。到那时,为什么ng-if最好是ng-show?我知道ng-show只是添加了一个隐藏DOM的东西,而不是完全删除它的类。 ng-if的优势在哪里? – frishi

回答

1

ng-if创建一个子作用域,使用$parent访问来自父作用域的变量。但是,在你的情况我会考虑使用,而不是NG-显示或NG隐藏NG-如果(他们不创造子作用域)

+2

目前我使用ng-show并且它可以工作,但是ng-show不会从页面中删除绑定。这就是为什么我想使用ng-if的原因。 –