angularjs - 使用 Angular 指令会导致错误 : 10 $digest() iterations reached. 中止

Question

http://plnkr.co/edit/dBe36L6vwOZOykujFRfg

在 plunker 中，我收到以下 Angular 错误:“已达到 10 $digest() 迭代。正在中止!”

该逻辑在index.html中使用时有效:

<h1>(working) Fruit from main document: {{vm.randomFruit().name}}</h1>

但是当我尝试使用传入的对象调用指令中的类似代码时会抛出错误:

<h1>(causing error) Fruit from directive template: {{fruit.name}}</h1>

如果我只是在作用域函数中执行此操作，它似乎也不会在指令中引发错误:

//this works for both instances
return vm.fruits[0];

但是，当我以任何方式触摸 $scope.fruits 时，即使只是复制它，它也会在指令版本上显示错误。

//something about touching the array here exposes the error, even though it still works
var x = [];
angular.copy(vm.fruits, x);
return x[0];

为什么这里会抛出这个错误？这似乎是某种类型的循环依赖，但为什么只在指令版本上？

有没有更好的方法来使用更标准的指令、模板和传入参数对象？

Error: 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [["fn: parentValueWatch; newVal: {\"name\":\"apple\"}; oldVal: {\"name\":\"apple\"}"],["fn: parentValueWatch; newVal: {\"name\":\"apple\"}; oldVal: {\"name\":\"apple\"}"],["fn: parentValueWatch; newVal: {\"name\":\"apple\"}; oldVal: {\"name\":\"apple\"}"],["fn: parentValueWatch; newVal: {\"name\":\"apple\"}; oldVal: {\"name\":\"apple\"}"],["fn: parentValueWatch; newVal: {\"name\":\"apple\"}; oldVal: {\"name\":\"apple\"}"]] at Error (native) at Object.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js:7925:19) at Object.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js:8097:24) at done (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js:9111:20) at completeRequest (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js:9274:7) at XMLHttpRequest.xhr.onreadystatechange (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js:9244:11)

<小时/>

更新 1

将 aFruit() 更新为 randomFruit() 以更好地演示我的问题:

$scope.randomFruit = function() {
//something about touching the array here exposes the error, even though it still works
var x = [];
angular.copy($scope.fruits, x);
//do some custom stuff here, sorting, etc. <whatever>
var randomIndex = Math.floor((Math.random() * x.length));
return x[randomIndex];
};

<小时/>

更新2

被告知不要使用 $scope，因此将其从 Controller 中完全删除。仍然看到同样的错误。

myApp.controller('FruitCtrl', function() {
  var vm = this;
  vm.fruits = fruits;

  vm.randomFruit = function() {
    //something about touching the array here exposes the error, even though it still works
    var x = [];
    angular.copy(vm.fruits, x);
    //do some custom stuff here, sorting, etc. <whatever>
    var randomIndex = Math.floor((Math.random() * x.length));
    return x[randomIndex];
  };
});

Answer 1

问题在于方法，即数据如何传递到 Angular。 Angular 具有很棒的数据绑定(bind)，它会检查模型是否更改并更新 UI。 UI 更新后，它会再次检查下一轮更改。如果数据一直在改变，它可能会陷入循环。

在这种特殊情况下，Angular 不知道数据是相同的。它在每个摘要循环上接收新数组，并假设数据已更改、更新 UI 并再次开始检查。

确保您没有在每个 $digest 循环上从 UI 更新数组或在每个 $digest 循环上返回新数组。 例如 这将调用无限循环:

$scope.aFruit= function() {
  return [
  {"name":"apple"},
  {"name":"orange"},
  {"name":"banana"},
];
};

这将正常工作，因为对数组的引用保持不变

var myFruits =   return [
      {"name":"apple"},
      {"name":"orange"},
      {"name":"banana"},
    ]    
$scope.aFruit= function() {
    myFruits;
    };