使用 angular 指令会导致错误：达到 10 次 $digest() 迭代。中止

Question

http://plnkr.co/edit/dBe36L6vwOZOykujFRfg

在 plunker 中，我收到以下角度错误：“已达到 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];

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

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

错误：达到 10 次 $digest() 迭代。中止！观察者开枪 最后 5 次迭代： [["fn: parentValueWatch; newVal: {\"名称\":\"苹果\"}; oldVal: {\"name\":\"apple\"}"],["fn: 父值观察； newVal: {\"名称\":\"苹果\"};旧值： {\"name\":\"apple\"}"],["fn: parentValueWatch;新值： {\"名称\":\"苹果\"}; oldVal: {\"name\":\"apple\"}"],["fn: 父值观察； newVal: {\"名称\":\"苹果\"};旧值： {\"name\":\"apple\"}"],["fn: parentValueWatch;新值： {\"名称\":\"苹果\"}; oldVal: {\"name\":\"apple\"}"]] 在错误（本机） 在 Object.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js:7925:19) 在 Object.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js:8097:24) 完成后 (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js:9111:20) 在完成请求 (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js:9274:7) 在 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，因此将其从控制器中完全删除。仍然看到同样的错误。

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 有很棒的数据绑定，它会检查模型是否改变并更新 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;
    };

Answer 2

哦，好的，明白了！ 有两种方法可以做到这一点，但我相信您正在寻找这种方法。

http://plnkr.co/edit/E1y9nqh0DdaHGW2hi4AM?p=preview

问题是您的方法正在返回一个对象，但您想获取字符串值。所以我们把方法改成这样：

$scope.randomFruit = function() {
  var x = [];
  angular.copy($scope.fruits, x);
  var randomIndex = Math.floor((Math.random() * x.length));
  return x[randomIndex].name;
};

接下来，我们需要更改我们的组件绑定以接受带有“@”的字符串

bindings: { fruit: '@' },

最后，我们需要调用模板中的方法，并使用插值将其设置为我们传递给组件的值：

<show-fruit fruit={{randomFruit()}} />

希望这会有所帮助，还有另一种方法，但是如果您想在 in 模板中调用您的方法，这就是您必须这样做的方式。