破坏我的代码的角度1.3发生了什么变化？

Question

我的代码在Angular 1.2中工作,但在1.3中不起作用,我无法弄清楚角度有什么变化以及我应该在我的代码中修改它来修复它.

我已经设置了一个plunkr示例.

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中,视图相应更新.在Angular 1.3中它没有.

要在角度1.2和角度1.3之间切换,您需要将路径更改为HTML文件顶部的角度.之间

<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,可以像你期望的那样工作.