AngularJS 10次$digest()迭代在生成随机值时被达到

Question

我有一个指令来构建一个列表，并在运行时为每个项绘制不同的颜色，例如：

$scope.color = function () {
    var letters = '012345'.split('');
    var color = '#';
    color += letters[Math.round(Math.random() * 5)];
    letters = '0123456789ABCDEF'.split('');
    for (var i = 0; i < 5; i++) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
};

然后我在模板中这样调用它：

<li ng-repeat="item in list">
   <a ng-style="{ background: color() }">{{item.acronym}}</a>
</li>

但是当模板编译时，会出现以下情况：

 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
 Watchers fired in the last 5 iterations: [["{ background: color() }; newVal: {\"background\":\"#455116\"}; oldVal: {\"background\":\"#2B1EDC\"}"],["{ background: color()...<omitted>...5D 

显然，$digest 处于循环中，但为什么我的随机颜色会导致发生这种情况，并且如何在将颜色分配给对象并像那样引用它之外解决此类问题。

- amcdnl

Answer 1

这是因为color函数在每个循环周期中都会被调用，在每个函数调用中都会生成不同的颜色...所以它会在一秒内多次变化。

- doodeec

---

你只需要生成一次颜色，而不在模板内使用函数表达式...或者基本上使函数始终为单个项目返回相同的字符串。 - doodeec

Answer 2

像 @doodeec 建议的那样，我重新编写了 color 函数，以便传递正在迭代的项目：

 <a ng-style="{ background: color(item) }">{{item.acronym}}</a>

在 color 函数中，我设置了它或者说如果已经有了就返回它...

$scope.color = function (item) {
    if (item.color) {
        return item.color;
    }

    var letters = '012345'.split('');
    var color = '#';
    color += letters[Math.round(Math.random() * 5)];
    letters = '0123456789ABCDEF'.split('');
    for (var i = 0; i < 5; i++) {
        color += letters[Math.round(Math.random() * 15)];
    }

    // assign the color so it doesn't freak out
    item.color = color;

    return color;
};

- amcdnl

---

谢谢！是的，它像魔法一样运作。在我看来，比迭代创建和分配要好得多。 - amcdnl