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

我有一个建立列表的指令，我会用不同的颜色快速绘制每个项目，就像：

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

$scope.color=函数（）{
变量字母='012345'。拆分（''）；
var color='#'；
颜色+=字母[Math.round（Math.random（）*5）]；
字母='0123456789ABCDEF'。拆分（''）；
对于（变量i=0；i<5；i++）{
颜色+=字母[Math.round（Math.random（）*15）]；
}
返回颜色；
};

然后我在模板中调用它，如下所示：

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

{{item.acronym}}

但当模板编译时，我得到了以下信息：

 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 

Uncaught错误：[$rootScope:infdig]已达到10$digest（）次迭代。流产！
在过去5次迭代中被解雇的观察者：[“{background:color（）}；newVal:{“background\：\”{“455116\”}；oldVal:{“background\：\”\“{2B1EDC\”}]，[“{background:color（）…..5D

---

显然$digest是一个循环，但是为什么我的随机颜色会导致这样的结果，除了将颜色分配给对象并以那样的方式引用它之外，您如何解决类似的问题。

这是因为

color

函数在每个摘要循环中都会被调用，并且在每个函数调用中都会生成不同的color…所以它在一秒钟内改变了多次

就像@doodeec建议的那样，我重拨

颜色

fn以传递项目，如：

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

---

您只需生成一次颜色，并且不在模板中使用函数表达式…或者基本上使函数对单个项始终返回相同的字符串谢谢！是的，它工作起来很有魅力。这比在创建和分配imo时迭代要好得多。

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