如何在具有隔离范围的指令上使用ng-show

Question

我有一个我这样使用的指令:

<dir model="data"></dir>

该指令具有独立的范围.

scope :{
  model:'='
}

现在我正在尝试使用ng-show我的页面的$ scope的另一个属性来使用该指令,如下所示:

<dir ng-show="show" model="data"></dir>

但它不起作用,因为该指令试图show在自己的范围内找到属性.

我不希望该指令知道它的容器可能选择隐藏它的事实.

我找到的解决方法是将指令包装在一个<div>并应用于ng-show该元素,但我不喜欢这个强制我使用的额外元素:

<div ng-show="show" >
  <dir model="data"></dir>    
</div>

有没有更好的方法呢？

看到这个plunker:http://plnkr.co/edit/Q3MkWfl5mHssUeh3zXiR？p =preview

Answer 1

更新:此答案适用于1.2之前的Angular版本.请参阅@ lex82对Angular 1.2的回答.

因为您的dir指令创建了隔离范围,所以在同一元素上定义的所有指令(dir在本例中)将使用该隔离范围.这就是在隔离范围而不是父范围上ng-show查找属性的原因show.

如果您的dir指令确实是一个独立/自包含/可重用的组件,因此它应该使用隔离范围,那么您的包装解决方案可能是最好的(比使用$parentIMO 更好),因为这些指令通常不应该与其他指令一起使用相同的元素(或者你得到了这种问题).

如果您的指令不需要隔离范围,则问题就会消失.

Answer 2

您可以考虑迁移到Angular 1.2或更高版本.隔离范围现在仅暴露给具有范围属性的指令.这意味着ng-show不再受你的指令的影响,你可以像你在第一时间那样编写它:

<dir ng-show="show" model="data"></dir>

@Angular-开发人员:干得好!伙计们!