ng-if 中的 AngularJS 指令不会运行答案

【问题标题】：AngularJS directive within ng-if won't runng-if 中的 AngularJS 指令不会运行
【发布时间】：2015-08-24 10:52:15
【问题描述】：

我有一个自定义指令myDirective 对元素执行任务。

我在 ng-if 块中有这个指令

<div ng-if="condition">
    <div my-directive></div>
</div>

类似这样的小提琴：在我的$http 请求加载后，http://jsfiddle.net/hGnvv/ 只有ng-if 条件变为真。

该指令可能在运行时编译，但从未链接，因此代码永远不会运行。如果我将ng-if 替换为ng-show，则该指令可以正常工作。

有什么解决办法吗？

编辑：我不能使用ng-show，因为表单中有 130 个指令。无论如何运行 20 个指令，另一个根据我的对象类型运行。

ng-if="type == 1" 然后加载这些元素
ng-if="type == 2" 然后加载其他元素等。

如果我将 ng-if 更改为 ng-show，则加载表单需要 8 秒而不是 1 秒。

【问题讨论】：

您已经有了解决方案。用 ng-show 替换 ng-if
我做不到，我在一个表单上有 130 条指令。如果我用 ng-show 替换 ng-if，所有这些必须运行的代码会使表单变得更慢（8s 而不是 ~1s）。
尽可能使用 ng-show。 ng-if 从 DOM 中移除元素，所以 Angular 无法编译它。
@AlexArvanitidis - 130 条指令 - 你想做什么？

标签： javascript angularjs compilation angular-directive angular-ng-if

【解决方案1】：

ng-if 条件最初为 false，因此该元素在 DOM 中不存在并且指令未链接。

当 ng-if 条件稍后变为 true 时，链接回调应该正确触发，如以下示例所示：

单击按钮时将ng-if 设置为true：http://jsfiddle.net/q05gret0/

在$http 请求加载后将ng-if 设置为true：http://jsfiddle.net/fhu8ky62/1/

如果您没有得到这种行为，则问题可能出在继承范围；检查ng-if 正在监视您的请求正在更新的同一范围变量。 This article 对父/子范围变量阴影和其他限制有几点看法。

【讨论】：

我想在 ng-if 条件为真时运行代码。问题是当它变为真时，指令的链接不会运行。
感谢您的帮助，这不是问题所在。我设法找到它，将其发布在下面的另一个答案中。

【解决方案2】：

问题不在于指令没有运行，而是我在其中的$watch 函数根本没有运行。我没能理解问题的确切原因，因为相同的指令在ng-if 之外也能正常工作。

无论如何，将我的$watch 更改为 -> $watchCollection 现在可以正常工作，因为它可以看到我正在观看的对象的所有更新。

【讨论】：

【解决方案3】：

例如，如果您的模型类似于 $scope.item = true 并且您像 ng-if="item" 一样使用它，您应该将您的模型更改为 $scope.myvalue = {} 并像这样使用：ng-if="myvalue.item"，我的意思是您应该为 @ 使用对象属性987654325@不是一个简单的值

【讨论】：