如何强制 ngRepeat 不通过引用进行比较？

Question

在一个指令中，我使用了ngRepeat，它从作用域上的参数化函数中获取其项目。

以简化的方式，它看起来像这样：

<div data-ng-repeat="data in containerItems">
    <div data-ng-repeat="myItem in getItems(data) track by myItem.Id">
        <!-- some content -->
    </div>
</div>

我的问题是我似乎无法摆脱以下异常：

错误：[$rootScope:infdig] 达到 10 个 $digest() 迭代。中止！

据我根据其他几个问题（例如this 或this）得出的结论，ngRepeat 似乎认为每次重新请求这些项目时都会更新，导致它提示另一个消化循环，最终以太多连续而结束而放弃。

特别是用户g00fy 的one comment 对我很有见地：确实，我正在使用lodash 的_.map function 来生成ngRepeat 显示的项目列表，从而每个创建新的对象实例time ngRepeat 重新请求它的项目。

起初，我认为可以通过将项目生成函数的返回值保存到作用域上的变量中来解决这个问题。这消除了上述错误。

不幸的是，这对我来说不是一个合适的解决方案，因为范围由我的指令的几个实例共享，其中使用了ngRepeat。我真的需要每个ngRepeat 使用适当的参数从生成函数中检索项目。

一开始我是用的

track by $index

但我也尝试过类似的东西

track by myItem.Id

我曾希望这会强制ngRepeat 假设该项目仅在 ID 更改时才更改。然而，这一切似乎都无法阻止上述异常的发生。

有什么方法可以强制 AngularJS 仅在其 值 更改时才考虑 ngRepeat 中的项目而不是实例更改？

从结构上看，getItems(data) 的返回值似乎可以保存在data 上。但是，我正在处理的应用程序框架中的代码（这意味着它依赖于应用程序的许多模块的行为并且不能更改）将直接获取包含 data 的对象图并发送到服务器端后端。因此，data 不是计算运行时数据的正确位置。

---

为了提供更完整的示例，getItems 函数大致如下所示：

$scope.getItems = function (data) {
    var itemSet = itemSets[data.itemSetId];
    if (itemSet.customItems) {
        return itemSet.customItems.slice(1);
    } else {
        return _.map(standardItems.slice(1), function (si) {
            return {
                Id: si.code,
                Name: si.Description + ' ' + si.Owner
            };
        });
    }
};

这里的细节不相关。重要的部分是我根据参数data 中的某些内容从其他地方检索项目，然后这些项目可能采用需要转换为由我的ngRepeat-ed 模板处理的规范格式的格式。

Answer 1

所以，我知道您有一个复杂的机制来获取您的数据，您需要在很多 ng-repeat 之间共享。

因为脏检查与 angularJS 一起工作的方式（简单 === 在保持值和 $scope 值之间），您必须将您的 ng-repeat 分配给单个引用（然后使用不可变对象，如果集合是更新）。

您是否有理由无法执行以下操作来获取数据？

myItems = {};
$scope.getItems = function (data) {
    if(!myItems[data.itemSetId]) {
        var itemSet = itemSets[data.itemSetId];
        if (itemSet.customItems) {
            myItems[data.itemSetId] = itemSet.customItems.slice(1);
        } else {
            myItems[data.itemSetId] _.map(standardItems.slice(1), function (si) {
                return {
                    Id: si.code,
                    Name: si.Description + ' ' + si.Owner
                };
            });
        }
    }
    return myItems[data.itemSetId];
};

Answer 2

1. 如果getItems(data)永远不会改变，你可以使用一次性绑定：ng-repeat="a in ::getItems(data)"
2. 如果它发生变化，您应该将它存储在 $scope 中并手动更新它——这可能是最好的方法。在 ng-repeat 中使用方法是不好的风格，很可能会在以后导致性能问题。所以，这看起来像：

<div data-ng-repeat="myItem in myItems track by myItem.Id">
$scope.myItems = getItems(data);
//somewhere you need to update myItems -- can be not easy

1. 您的问题是您的 getItems 不应该创建对象，因此您可以通过缓存对象或完整结果来修复它（请参阅 Deblaton 答案），但这通常不好。所以，这看起来像：

   <div data-ng-repeat="myItem in getItems(data) track by myItem.Id">
   
   $scope.objectCache = {};
   $scope.getItems = function (data) {
       var itemSet = itemSets[data.itemSetId];
       if (itemSet.customItems) {
           return itemSet.customItems.slice(1);
       } else {
           return _.map(standardItems.slice(1), function (si) {
               if (!objectCache[si.code]) { 
                   objectCache[si.code] = {
                      Id: si.code,
                      Name: si.Description + ' ' + si.Owner
                   }; 
               }
               return objectCache[si.code];
           });
       }
   };