使用带有 ng-repeat 的函数导致无限摘要循环答案

【问题标题】：Using function with ng-repeat causing infinite digest loop使用带有 ng-repeat 的函数导致无限摘要循环
【发布时间】：2017-02-01 01:10:26
【问题描述】：

我有以下代码。

https://plnkr.co/edit/Tt7sWW06GG08tdJu72Fg?p=preview。请完全展开窗口以查看整个视图。

我有 categories 和 sub-categories 显示在导航栏中，如上面的 plunkr 所示。每个类别都有要显示的服务/子类别。

我正在使用 2 个嵌套的 ng-repeats，而内部的一个正在使用来自 ng-repeat 的父迭代的值。我已将函数getServicesByCategory 附加到内部ng-repeat，该函数从DocumentsFactory 调用getServicesByCategory 并解析promise 以返回数组对象subcategories 中的数据，最终应该由内部@987654333 迭代@。

类别显示正常，但子类别不显示。

这有两个问题。

1)。每个类别的子类别都显示相同，并且显示的子类别属于外部 ng-repeat 迭代中的最后一个类别，即Utility Services。相反，每个类别都应该显示它自己的子类别。

2)。由于尝试超过 10 次，控制台显示多个 infinite digest cycle 中止错误，这些错误 http://errors.angularjs.org/1.5.6/$rootScope/infdig?p0=10&p1=%5B%5D 在控制台中重复出现。方法getServicesByCategory在无限循环中被调用，触发多个摘要循环。

似乎是一个简单的类别问题，由 Angular 的 dirty checking 和 digest cycles 复杂化。

我阅读了多个线程和帖子，建议不要在与 ng-repeat 关联的函数内返回新对象，而我不是。我正在返回subcategories 的引用。

inner ng-repeat 依赖于来自outer 的数据之一。将函数绑定到 ng-repeat 对我来说是唯一的选择。这是正确的方法吗？获取类别和子类别的 API 是不同的，我无法灵活地更改它们。我一直无法想出解决方案。只想针对每个类别调整子类别。

任何帮助将不胜感激！

注意：在全窗口中打开视图可以看到左侧的导航栏。

【问题讨论】：

标签： javascript angularjs promise angularjs-ng-repeat angular-promise

【解决方案1】：

这里的解决方案是获取您需要的所有数据并创建一个类别数组，每个类别都包含自己的子类别。并在嵌套的ng-repeats 中使用这个对象。

请检查我的更新版本你的 plunker：

https://plnkr.co/edit/BaHOcI4Qa8t5CkbshyCX

如你所见，我使用：

ng-repeat="category in documents.categories"

在外ng-repeat和：

ng-repeat="service in category.subCategories"

在里面。

在控制器中，我通过以下方式构建category.subCategories：

documentsFactory
  .getCategories() // Get categories
  .then(function(response) { // Extract them from the response
    return response.data.subCategory;
  })
  .then(getSubcategories) // For every catgory, get its own subcategory
  .then(function(categories) { // Add categories to the $scope
    self.categories = categories;
  });

getSubcategories 在哪里：

function getSubcategories(categories) {
  console.log(categories)
  var retrievSubcategories = categories.map(function(category) { // Create a promise to get the subcategories for every category
    return documentsFactory
      .getServicesByCategory(category.name) // Get the subcategories for the given category
      .then(function(response) {
        category.subCategories = response.data.documents; // Add subgategories to the category
        return category;
      });
  });
  return $q.all(retrievSubcategories) // Return a promise resolve only when all the subcategories for every category are retrieved
}

【讨论】：