为什么ng-hide不适用于自定义指令？

Question

我正在阅读angularjs.org上的开发人员指南的指令部分,以更新我的知识并获得一些见解,我试图运行其中一个示例,但指令ng-hide不适用于自定义指令.

这里是jsfiddle:http://jsfiddle.net/D3Nsk/:

<my-dialog ng-hide="dialogIsHidden" on-close="hideDialog()">
  Does Not Work Here!!!
</my-dialog>
<div ng-hide="dialogIsHidden">
       It works Here.
</div>

对于为什么会发生这种情况的任何想法？

解

看来标签上的变量dialogIsHidden已经引用了指令内的范围变量而不是控制器中的变量; 鉴于该指令具有自己的曝光范围,为了使这项工作,必须通过引用将控制器的变量dialogIsHidden传递给指令.

这里是jsfiddle:http: //jsfiddle.net/h7xvA/

变化:

 <my-dialog 
     ng-hide="dialogIsHidden" 
     on-close="hideDialog()" dialog-is-hidden='dialogIsHidden'>

和:

  scope: {
    'close': '&onClose',
    'dialogIsHidden': '='
  },

Answer 1

在将对象指向范围时,您将在指令内创建一个隔离的范围.这就是为什么$ scope.dialogIsHidden没有传递给指令,因此元素没有被隐藏.

Kain建议使用$ parent调整小提琴,这说明了这一点.

Answer 2

你可以改变

 <my-dialog ng-hide="dialogIsHidden" on-close="hideDialog()">

至

 <my-dialog ng-hide="$parent.dialogIsHidden" on-close="hideDialog()">