Angular ng-animate 1.3.* 导致 ng-class 内部指令出现意外行为

Question

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

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

看看这个 Plunker 来说明问题。

此 Plunker 代码适用于 angular 1.2.* 版本，如您所见，它工作正常。

尝试更改 angular 版本 (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 错误，我说得对吗？

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

Answer 1

您是否有任何特定理由在指令中使用 replace 选项？如果没有，您可以将其删除并且它可以正常工作。 Link 与 Angular 1.3.9:

一起工作

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

V1.3.9 docs 表明 replace 已被弃用，指令工作时很少需要它，显然在您的情况下它也造成了一些麻烦。

Answer 2

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

要解决此问题，您可以从指令中删除 replace，或者如果您想使用 replace，则仍然可以将包含 ng-transclude 的指令模板内容包装在 [=25= 中] 喜欢下面

<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>

有关更多信息，请参阅 - https://docs.angularjs.org/api/ng/directive/ngTransclude , Explain replace=true in Angular Directives (Deprecated)。

Answer 3

@bensiu: 删除 template 中未使用的*变量 {{effectClass}} 将使其适用于链接到问题的 plunker 示例中的 1.4.4。

修改后的 plunk here

*编辑：可能我应该说 "using a variable not in scope" 而不是 "unused variable"。

Angular ng-animate 1.3.* 导致 ng-class 内部指令出现意外行为

Angular ng-animate 1.3.* Causes to unexpected behavior to ng-class inside directive

angularjs

angularjs-directive

ng-animate

ng-class

isolate-scope