Question

以下为什么会出错：

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

代码

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
      <span ng-bind="getText()"></span>
  </div>
</div>

function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

    $scope.getText = function() {
        var names = $scope.todos.map(function(t) { 
            return t.text;
        });
        return names;
    }
  };

代码块应该抓取所有todos，然后使用ng-bind在列表中呈现它们的名称。它有效，但在控制台中出现了大量的摘要迭代错误。

jsfiddle

Answer 1

在ng-bind中使用函数评估确实是一种不好的做法，这个无限的摘要周期的原因是因为你的摘要周期永远不会被解决。每次消化循环都会发生ng-bind表达式也会运行，因为ng-bind表达式的返回值总是不同（array.map生成的不同对象引用），它必须再次重新运行摘要循环并继续直到达到最大限制设置，即10。

在您的具体情况下，您可以将names设置为范围属性和ng-bind="name"。

   $scope.names = $scope.todos.map(function(t) { 
        return t.text;
    }).join();

作为一般规则，您可以确保仅在需要时从控制器更新属性name，例如，当发生事件时，例如添加待办事项，移除待办事项等等。A typical scenario in this answer。您也可以使用插值而不是ng-bind并使用函数表达式。 {{}}。即：

 $scope.getText = function() {
        return $scope.todos.map(function(t) { 
            return t.text;
        }).join();

    }

和

<span>{{getText()}}</span> <!--or even <span ng-bind="getText()"></span>-->

<强> Fiddle

Answer 2

我觉得你已经过度复杂，我已经用工作解决方案http://jsfiddle.net/U3pVM/12417/更新了小提琴。

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
      <div ng-repeat="todo in todos"> 
          <span >{{ todo.text}}</span>
      </div>

  </div>
</div>

function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

  };

当循环遍历列表时，angularjs无限的摘要错误

2 个答案: