Cosa è cambiato in 1.3 angolare che ha rotto il mio codice?

Question

Il mio codice ha funzionato in Angular 1.2, ma non funziona in 1.3 e non riesco a capire cosa è cambiato in angolare e cosa dovrei cambiare nel mio codice per risolverlo.

Ho impostato un plunkr example.

Il codice HTML è semplicemente

{{ 'guy' | change }} 

il codice JavaScript è:

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(); 
    } 
}); 

L'idea è che il risultato del filtro dipende una risposta asincrona.

In Angular 1.2, la visualizzazione è stata aggiornata di conseguenza. In Angular 1.3 non è così.

Per alternare tra 1,2 angolare e 1,3 angolare, è necessario modificare il percorso in direzione angolare nella parte superiore del file HTML. tra

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

e questo

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

Ho anche provato 1.3.1 - stesso problema.

Answer 1

Ciò è dovuto a un'ottimizzazione introdotta dalla 1.3.0-rc2.

Fondamentalmente, il servizio $parse esegue il dirty-checking sugli input e rivaluta l'espressione solo se almeno uno degli input è stato modificato. Nel tuo esempio, il "ragazzo" letterale, l'unico input dell'espressione, non viene mai modificato, quindi l'intera espressione compreso il filtro non verrà rivalutata. L'implicazione è che i filtri dovrebbero essere privi di stato, restituendo lo stesso risultato per lo stesso input.

presuppongono che è consapevole e accettare la riduzione delle prestazioni, è possibile ignorare questa ottimizzazione dicendo AngularJS che siete filtro è stateful, in questo modo:

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

Questa è la nuova plunkr che funziona, come si mi aspetterei.