What has changed in angular 1.3 that broke my code?

Question

My code worked in Angular 1.2, but does not work in 1.3, and I cannot figure out what has changed in Angular and what I have to change in my code to fix it.

I installed the plunkr example .

HTML code is simple

{{ 'guy' | change }} 

Javascript code:

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

The idea is that the result of the filter depends on the asynchronous response.

In Angular 1.2, the view is updated accordingly. In Angular 1.3, this is not the case.

To switch between Angular 1.2 and Angular 1.3, you need to change the route to Angular at the top of the HTML file. between

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

and this one

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

I also tried 1.3.1 - the same problem.

Answer 1

This is due to the optimization introduced with 1.3.0-rc2.

Basically, the $parse service checks for dirty inputs and only reevaluates the expression if at least one of the inputs has been changed. In your example, the literal “guy,” the only input to the expression, never changes, so the full expression that includes the filter will not be reevaluated. The implication is that the filters must be inactive, returning the same result for the same input.

Assuming you know and accept a performance penalty, you can get around this optimization by telling AngularJS that you are a stateful filter, for example:

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

This is a new plunkr that works as you expected.