角度过滤器有效，但会导致“达到10次$ digest迭代”

Question

我从后端服务器接收数据，其结构如下：

{
  name : "Mc Feast",
  owner :  "Mc Donalds"
}, 
{
  name : "Royale with cheese",
  owner :  "Mc Donalds"
}, 
{
  name : "Whopper",
  owner :  "Burger King"
}

以我的观点，我想“反转”列表。即，我想列出每个所有者，并为该所有者列出所有汉堡包。我可以通过groupBy在过滤器中使用underscorejs函数来实现此目的，然后将其与ng- repeat指令一起使用：

JS：

app.filter("ownerGrouping", function() {
  return function(collection) {
    return _.groupBy(collection, function(item) {
      return item.owner;
    });
  }
 });

HTML：

<li ng-repeat="(owner, hamburgerList) in hamburgers | ownerGrouping">
  {{owner}}:  
  <ul>
    <li ng-repeat="burger in hamburgerList | orderBy : 'name'">{{burger.name}}</li>
  </ul>
</li>

这可以按预期工作，但是当使用错误消息“达到10个$
digest迭代次数”来呈现列表时，我得到了一个巨大的错误堆栈跟踪。我很难看到我的代码如何创建此消息暗示的无限循环。有谁知道为什么吗？

这是一个代码如下的链接：http
://plnkr.co/edit/8kbVuWhOMlMojp0E5Qbs?
p=
preview

Answer 1

发生这种情况是因为每次运行时都会_.groupBy返回 新 对象的集合。Angular
ngRepeat并没有意识到那些对象是相等的，因为ngRepeat它们通过 identity来
跟踪它们。新对象导致新身份。这使Angular认为自上一次检查以来已发生了某些变化，这意味着Angular应该运行另一个检查（即摘要）。下一个摘要将最终获得另一组新对象，因此将触发另一个摘要。重复直到Angular放弃。

消除错误的一种简单方法是确保您的过滤器每次都返回相同的对象集合（当然，除非它已更改）。您可以使用下划线很容易地做到这一点_.memoize。只需将过滤器功能包装在备忘录中即可：

app.filter("ownerGrouping", function() {
  return _.memoize(function(collection, field) {
    return _.groupBy(collection, function(item) {
      return item.owner;
    });
  }, function resolver(collection, field) {
    return collection.length + field;
  })
});

如果您计划对过滤器使用不同的字段值，则需要解析器功能。在上面的示例中，使用了数组的长度。最好将集合减少为唯一的md5哈希字符串。

在这里看到油门叉。Memoize将记住特定输入的结果，如果输入与以前相同，则返回相同的对象。但是，如果值经常更改，则应检查是否_.memoize丢弃旧结果，以免随着时间的推移而发生内存泄漏。

进一步研究，我看到它ngRepeat 支持扩展的语法... track by EXPRESSION，通过允许您告诉Angular查看owner餐厅的名称而不是对象的身份，这可能会有所帮助。这将是上述记忆技巧的替代方法，尽管我无法在插件中测试它（可能是以前track by实施的Angular的旧版本？）。