具有Angular表达式绑定的无限循环

Question

我有一个角度应用程序,通过简单的表达式绑定显示控制器方法返回的值:

<div>{{getValue()}}</div>

如果有问题的方法只返回一个值,则该方法被调用两次,这很奇怪:

$scope.getValue = function(){
  return 'some value';
}

但是,如果该方法执行一些异步工作,例如从服务器获取文件,则代码进入无限循环:

$scope.getValueAsync = function(){
  $http.get('myfile.html')
    .success(function (data, status, headers, config) {
      return 'some async value';
    });

  return 'file not found'; // same value returned every time but $digest cycle still loops
}

我是Angular的新手,所以可能错过了一些基本的东西,但有人可以解释一下发生了什么吗？

Plunker

这是一个可以玩http://plnkr.co/7BriYDbdVJvIoIigQcTU的玩家

Answer 1

即使你的异步函数每次返回相同的字符串,$ digest循环也会在循环中触发,因为你的函数也使用$ http服务进行ajax调用.

$ http服务$rootScope.$apply() 在请求完成时触发,并且因为$apply触发$摘要周期,它会使您的视图表达式被重新评估,这反过来会导致您的异步函数再次被调用,依此类推......

app.controller('MainCtrl', function($scope, $http) {

  $scope.getValue = function(){
    return 'some value';
  }

  $scope.getValueAsync = function(){
    $http.get('myfile.html')
      .success(function (data, status, headers, config) {
        return 'some async value';
      });

    return 'file not found';
  }
});

<div>{{getValueAsync()}}</div>

故事的道德:如果你在表达式中使用函数,请确保你的函数不会影响它们之外会触发$ digest循环的函数,并确保在给定相同输入的情况下函数总是返回相同的输出.