Question

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

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

查看此Plunker来说明问题。

此Plunker代码的角度为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>-->

刷新页面，然后您可以看到错误：
Angular不会根据'active'属性更改来刷新ng-class。

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

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

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

所以它是 AngularJS bug ，我是对的吗？

如果没有，我做错了什么？

Answer 1

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

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

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

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

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

Answer 3

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

修改了plunk here

*编辑：可能我应该说＆＃34;使用不在范围内的变量＆＃34;而不是＆＃34;未使用的变量＆＃34;。

Angular ng-animate 1.3。*导致ng-class inside指令的意外行为

3 个答案: