15

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

在我的应用程序中，我有一个非常简单directive的包含一个templatewith ng-class(with condition to scope property)，由于某种原因它不适用于 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 错误，对吗？

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

4

3 回答 3

7

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

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

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

于 2015-12-17T11:42:45.983 回答
1

根据文档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，在 Angular Directives (Deprecated) 中解释 replace=true。

于 2015-12-23T07:06:26.963 回答
1

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

修改plunk在这里

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

于 2015-12-23T19:21:54.687 回答