angularjs - Angular 1.3 中的哪些变化破坏了我的代码？

Question

我的代码在 Angular 1.2 中工作，但在 1.3 中不起作用，我无法弄清楚 Angular 发生了什么变化以及我应该在代码中更改什么来修复它。

我已经设置了plunkr example 。

HTML 中的代码很简单

{{ 'guy' | change }}

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

这个想法是过滤器的结果取决于异步响应。

在 Angular 1.2 中， View 也相应更新。在 Angular 1.3 中则不然。

要在 Angular 1.2 和 Angular 1.3 之间切换 - 您需要将 HTML 文件顶部的路由更改为 Angular。之间

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

还有这个

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

我也尝试过 1.3.1 - 同样的问题。

Answer 1

这是由于自 1.3.0-rc2 以来引入的优化所致。

基本上，$parse 服务对输入执行脏检查，并且仅在至少一个输入发生更改时才重新计算表达式。在您的示例中，表达式的唯一输入文字“guy”永远不会更改，因此包括过滤器在内的整个表达式不会被重新计算。这意味着过滤器应该是无状态的，对于相同的输入返回相同的结果。

假设您意识到并接受性能损失，您可以通过告诉 AngularJS 您的过滤器是有状态的来绕过此优化，如下所示:

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

这是新的plunkr这正如您所期望的那样工作。