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

Obviosuly $ digest是一个循环，但为什么我的随机颜色会导致这样做？除了将颜色分配给对象并引用它之外，你如何处理这样的事情。

Answer 1

这是因为color函数在每个摘要周期中被调用，并且在每个函数调用中它生成不同的颜色......所以它在一秒内多次改变

Answer 2

像@doodeec建议的那样，我重新使用color fn来传递迭代的项目，如：

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

并在color fn我设置它或者说它是否已经让它返回它...

$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;
};

生成随机值时达到AngularJS 10 $ digest（）迭代

2 个答案: