ng-if 初始动画不适用于自定义指令答案

【问题标题】：ng-if initial animation not working with a custom directiveng-if 初始动画不适用于自定义指令
【发布时间】：2016-07-24 21:04:09
【问题描述】：

如果 ng-if 和自定义指令放在同一个 DOM 元素上，则初始动画不起作用。

<div ng-if="value" myDirective class="fadeMe"></div>

这是plunkr，清楚地显示了问题所在。请注意，只有初始显示淡入淡出失败。

更多详情：我猜这与两个指令的优先级有关（首先编译ngif）。

我尝试为自定义指令设置更高的优先级，但遇到了更多问题，例如自定义指令的子范围不会被 ng-if 破坏，因此，自定义指令中不必要的观察者会继续观察值。

【问题讨论】：

你能把 ng-if 和 class 放到指令模板的根目录下吗？ plnkr.co/edit/zEuiEKpsk2AHGigSgXcq?p=preview
我可以，但是，在一个非常复杂的应用程序中使用这种方法，我将有许多自定义指令浮动并且会增加 DOM。我希望将所有这些自定义指令从 DOM 中删除并在需要时显示。感谢您的帮助。

【解决方案1】：

似乎和这个问题有关：

如果你在指令中使用内联模板而不是 templateURL，它就会开始工作。

【讨论】：

非常有用的链接。似乎动画在第一次加载 templateURL 之前开始，因为它没有被缓存。 github.com/angular/angular.js/issues/…

【解决方案2】：

在类的 Angular 指令“限制类型”中，数据绑定似乎存在时间问题。

restrict: 'C'

所以快速修复使用

restrict: 'A'

【讨论】：

您好 Khaled，您的 plunker 显示指令名称 (al-login) 被应用为类而不是属性，尽管您定义了限制：'A'。不应该是属性吗？当您将其用作属性时，问题再次出现。
同意！正如我所提到的，它看起来像是 Angular 中的一个错误，您应该为此在 github 上打开一个问题