javascript - ng-show 不能与 ng-animate 一起正常工作

Question

当加载 animate 模块时，ng-show 不工作。 ng-show 表达式的默认值为 false，但元素仍然显示并且类 ng-hide 丢失。如果我卸载动画模块，那么它工作正常。

<script>
var app=angular.module('app', ['ngRoute','ngCookies','infinite-scroll','ui.mask','ngAnimate']);
</script>

Answer 1

我有同样的问题，这可能是一个时间问题，但有一个解决方法。简而言之，在“class”属性中定义的带有插值的类与试图添加另一个类的同一元素上的其他指令之间存在一些冲突。删除 class="{{::item.customClass}}" 可以让 ng-class 和 ng-show 指令正常工作。

我无法在 plunker 上重现它，可能是因为涉及到大量组件。我们使用 $templateCache 服务、ngAnimate 模块和一个指令，该指令将 ng-repeat 与动态类和 ng-show 一起使用(以及更多，这似乎并未影响问题)。删除任何提到的问题都解决了这个问题。有一件事我没有尝试，那就是尝试将代码从 ui-view 层次结构中分离出来，也许 ui-router 是问题的一部分。

调试显示在 ng-class/ng-show 的 watch 执行后，添加了正确的类，它看起来像这样:class="{{::item.customClass}} ng-hide"，但在摘要循环结束时它看起来像这样:class="myCustomClass"。我想这也是您的代码中发生的情况。

我处理这种情况的方法是将 item.customClass 移动到 ng-class，如下所示:ng-class=[{ ... other classes}, item.customClass]

这是一种变通方法，而不是真正的解决方案，因为:

1. 这可能是 Angular 代码中的一个真正问题。
2. 我不知道如何在这里使用 bind once，这当然很重要。