Question

我正在重复一个指令，需要设置从每个实例上的颜色数组中随机选择的背景颜色。

我已经尝试了这个，但每次运行链接功能时它都有一个新的颜色集

link: ( scope, element, attrs ) ->

  colors = ["#ED6533", "#33EDC4", "#ED325D", "#33BCF2", "#EDC434", "#ED33BC"]
  scope.bgcolor = colors[Math.floor(Math.random() * colors.length)];

如何在每个指令实例上只设置一次值？

Answer 1

尝试将scope: {}添加到您的指令中，您可以在其中放置链接功能：

...
scope: {},
link: ( scope, element, attrs )...
...

Answer 2

使用<directive:color style="background-color: {{::bgcolor}}" class="block" ng-repeat="i in items">asdf</directive:color>绑定：

{{1}}

查看plunker example

Answer 3

跟踪似乎是解决方案。问题是列表正在刷新并重新绘制所有元素。

在幕后，ngRepeat为每个任务添加了一个$$ hashKey属性以跟踪它。如果用服务器中的新任务对象替换原始任务，即使这些对象与原始任务完全相同，它们也不会具有$$ hashKey属性，因此ngRepeat不会知道它们代表相同的元素。在Angular 1.2中，对ngRepeat的语法进行了新的添加：令人惊讶的track by子句。它允许您指定自己的ngRepeat键来识别对象，而不是仅生成唯一ID。这意味着您可以将上面的内容更改为ng-repeat =“task.id中的任务跟踪任务”，因为原始任务中的ID与服务器中的更新内容相同 - ngRepeat将不会知道重新创建DOM元素并重用它们。 http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/

AngularJS指令仅在ng-repeat中为每个项目设置不同的值一次

3 个答案: