9

我正在阅读 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': '='
  },
4

2 回答 2

9

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

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

于 2013-11-08T03:12:00.910 回答
8

你可以改变

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

至

 <my-dialog ng-hide="$parent.dialogIsHidden" on-close="hideDialog()">
于 2013-11-08T03:34:19.263 回答