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

AngularJS directive set different value for each item in ng-repeat only once

本文关键字：一次 ng-repeat 指令 设置 项目 AngularJS      更新时间：2023-09-26

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

我已经尝试过了，但每次运行链接功能时它都会设置一个新的颜色

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

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

尝试将

scope: {}添加到您的指令中，您在其中放置了链接函数：

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

使用::绑定：

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

看普伦克的例子

跟踪似乎是

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

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

相关文章：