Angular ng-animate 1.3. * Ursachen für unerwartetes Verhalten der ng-Klasse innerhalb der Direktive

Question

Ich bin in der Mitte des Übergangs von Version 1.2. * Zu 1.3. *, Und ich stieß auf eine sehr seltsame und kritische Fehler.

In meiner Anwendung habe ich eine sehr einfache directive enthalten ein template mit ng-class (mit Bedingung Umfang Eigenschaft) aus irgendeinem Grund funktioniert es nicht mit 1.3. * Version, und es ist gut funktionieren mit 1.2. * Version.

Werfen Sie einen Blick auf diese Plunker, um das Problem zu veranschaulichen.

Dieser Plunker Code ist mit eckiger 1.2. * Version, und wie Sie sehen können, ist es in Ordnung.

Versuchen Sie, die abgewinkelte Ausführung ändern (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>--> 

Refresh die Seite, und dann können Sie den Fehler sehen:
Angular nicht aktualisiert die ng-Klasse nach zu der 'aktiven' Eigenschaft ändern.

Ich habe versucht zu verstehen, was zu diesem Fehler führen kann, und nach vielen Versuchen habe ich festgestellt, dass 'ngAnimate' Modul zu diesem Problem führt. versuchen, die 'ngAnimate' Abhängigkeit (script.js) zu löschen:

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

Und dann kann man sehen, dass alles in Ordnung ist, so 'ngAnimate' Version 1.3 * Ursachen für dieses Problem..

So ist es AngularJS Bug, habe ich Recht?

Wenn nicht, was mache ich falsch?

Answer 1

Haben Sie einen bestimmten Grund, die Option replace in der Richtlinie zu verwenden? Wenn nicht, können Sie es einfach entfernen und es funktioniert gut. Link zu arbeiten Plunker mit kantigen 1.3.9:

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

V1.3.9 docs sagen, dass replace veraltet ist und nur sehr selten benötigt für Richtlinien zu arbeiten, und offenbar in Ihrem Fall ist es auch gelungen, einige Probleme zu verursachen.

Answer 2

Nach dem Dokument replace wird in Version 2 veraltet. Da Sie Angular 1.3.9 verwenden, sollte das in Ordnung sein.

um dieses Problem zu beheben, können Sie entweder replace aus der Richtlinie entfernen oder nach wie vor, wenn Sie wollen replace verwenden dann Richtlinie Vorlage Inhalt wickeln die ng-transclude in einem div wie unter

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

Für weitere Informationen siehe hat - https://docs.angularjs.org/api/ng/directive/ngTransclude, Explain replace=true in Angular Directives (Deprecated).

Answer 3

@bensiu: Das Entfernen der unbenutzten * Variablen {{effectClass}} im template wird es für 1.4 funktionieren lassen.4 in der plunker Beispiel mit der Frage verknüpft.

Modified zupfen here

* Edit: Wahrscheinlich sollte ich sagen "eine Variable in ihrem Umfang nicht mit" und nicht als "nicht verwendete Variable".