Angular ng-animate 1.3.* 导致 ng-class inside 指令出现意外行为答案

【问题标题】：Angular ng-animate 1.3.* Causes to unexpected behavior to ng-class inside directiveAngular ng-animate 1.3.* 导致 ng-class inside 指令出现意外行为
【发布时间】：2015-01-20 12:37:53
【问题描述】：

我正处于从版本 1.2.* 到 1.3.* 的转换过程中，遇到了一个非常奇怪且严重的错误。

在我的应用程序中，我有一个非常简单的directive 包含一个template 和ng-class（具有范围属性的条件），由于某种原因它不适用于 1.3.* 版本，它适用于 1.2.*版本。

看看这个Plunker 来说明问题。

这个 Plunker 代码是 angular 1.2.* 版本，你可以看到它工作正常。

尝试更改角度版本（index.html）

<script src="https://code.angularjs.org/1.3.9/angular.js"></script>
    <script src="https://code.angularjs.org/1.3.9/angular-animate.js"></script>
   <!--<script src="https://code.angularjs.org/1.2.28/angular.js"></script>
   <script src="https://code.angularjs.org/1.2.28/angular-animate.js"></script>-->

刷新页面，然后就可以看到bug：
Angular 不会根据 'active' 属性的变化来刷新 ng-class。

我试图了解导致此错误的原因，经过多次尝试后，我发现'ngAnimate' 模块导致了此问题。尝试删除'ngAnimate' 依赖（script.js）：

  //var app = angular.module('app', ['ngAnimate']);
    var app = angular.module('app', []);

然后你可以看到一切都很好，所以'ngAnimate'版本1.3.*导致了这个问题。

所以这是 AngularJS 错误，对吗？

如果不是，我做错了什么？

【问题讨论】：

感谢您的提示。自从升级以来，我遇到了 ng-class 的问题，该类要么没有更新，要么在更新的范围变量上保留了旧值和新值。我引用了 ng-animate 模块，但实际上并没有使用它。自从删除该引用后，到目前为止我还没有看到这个问题。
你检查了吗？ docs.angularjs.org/guide/migration#animation-nganimate-

标签： angularjs angularjs-directive ng-animate ng-class isolate-scope

【解决方案1】：

您是否有任何特定理由在指令中使用replace 选项？如果没有，您可以将其删除，它可以正常工作。使用 Angular 1.3.9 链接到工作 plunker：

http://plnkr.co/edit/jLIS9uJ1PHC64q6nEmtB?p=preview

V1.3.9 docs 告诉 replace 已被弃用，并且指令很少需要它来工作，显然在你的情况下它也设法造成了一些麻烦。

【讨论】：

【解决方案2】：

根据文档replace 将在版本 2 中弃用。因为您使用的是 Angular 1.3.9，所以应该没问题。

要解决此问题，您可以从指令中删除replace，或者如果您想使用replace，然后将具有ng-transclude 的指令模板内容包装在如下所示的div中

<div><div ng-click='click()' ng-class='{\"{{defaultColorClass}}\" : !active, \"{{activeColorClass}}\": active, \"mousePointer\" : !active}' class='k-content-button-inner-style {{effectClass}} {{externalClass}}' ng-transclude></div></div>

【讨论】：

【解决方案3】：

修改plunkhere

*编辑：也许我应该说“使用不在范围内的变量”而不是“未使用的变量”。

【讨论】：