Was hat sich in eckigen 1.3 geändert, die meinen Code zerstört haben?

Question

Mein Code arbeitete in Angular 1.2, aber funktioniert nicht in 1.3 und ich kann nicht herausfinden, was sich in Winkel geändert und was ich in meinem Code ändern sollte, um es zu beheben.

Ich habe eine plunkr example eingerichtet.

Der Code in HTML ist einfach

{{ 'guy' | change }} 

Der Javascript-Code ist:

angular.module('app').service('MyService', function($timeout){ 

    var data = null; 

    $timeout(function(){ 
    data = 'this is data'; 
    },2000); 

    this.transform = function(){ 
    return data; 
    } 

}); 


angular.module('app').filter('change', function(MyService){ 
    return function(input){ 
    return MyService.transform(); 
    } 
}); 

Die Idee, dass das Ergebnis auf einem Asynchron-Antwort hängt des Filters ist.

In Angular 1.2 wurde die Ansicht entsprechend aktualisiert. In Angular 1.3 ist dies nicht der Fall.

Um zwischen eckigen 1.2 und eckigen 1.3 zu wechseln - müssen Sie die Route zu eckigen am oberen Rand der HTML-Datei ändern. zwischen

<script data-require="angular.js@1.3.0" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script> 

und diesem

<script data-require="angular.js@1.2.0" data-semver="1.2.0" src="//code.angularjs.org/1.2.0/angular.js"></script> 

Ich habe auch versucht 1.3.1 - gleiches Problem.

Answer 1

Dies ist auf eine Optimierung zurückzuführen, die seit 1.3.0-rc2 eingeführt wurde.

Grundsätzlich führt der Dienst $parse eine Überprüfung der Eingänge durch und überprüft den Ausdruck nur dann neu, wenn mindestens einer der Eingänge geändert wurde. In Ihrem Beispiel wird der literale "Typ", die einzige Eingabe des Ausdrucks, niemals geändert, sodass der gesamte Ausdruck einschließlich des Filters nicht erneut ausgewertet wird. Die Implikation ist, dass Filter zustandslos sein sollten und dasselbe Ergebnis für dieselbe Eingabe zurückgeben sollten.

Angenommen, Sie sind sich dessen bewusst und die Leistungseinbuße akzeptieren, können Sie diese Optimierung umgehen, indem AngularJS zu sagen, dass Sie Filter Stateful ist, wie folgt aus:

angular.module('app').filter('change', function(MyService){ 
    var fn = function(input) { 
    return MyService.transform(); 
    } 
    fn.$stateful = true; 
    return fn 
}); 

Dies ist die neue plunkr, die, wie Sie arbeitet würde erwarten.