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() when requests are completed并且由于$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循环的函数，并确保你的函数总是返回给出相同输入的相同输出。

Answer 2

我遇到了和你一样的问题，解决了我们可以缓存函数结果的问题。为此我更喜欢使用Lo-Dash的memoize功能。我创建了一个演示，向您展示我是如何设法解决此问题的。The following link contains the demo: http://plnkr.co/edit/KBmk4J2ZCt0SsmZlnKZi?p=preview

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

2 个答案: