使用带有 ng-repeat 的函数导致无限摘要循环 [英] Using function with ng-repeat causing infinite digest loop

问题描述

我有以下一段代码.

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

https://plnkr.co/edit/Tt7sWW06GG08tdJu72Fg?p=preview. Please expand the window fully to see the whole view.

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

I have categories and sub-categories to display in a navbar as shown in the above plunkr. Each category has services/sub-categories to display.

我使用了 2 个嵌套的 ng-repeat，内部使用了 ng-repeat 的父迭代中的值.我已将一个函数 getServicesByCategory 附加到内部 ng-repeat 中，该函数从 DocumentsFactory 调用 getServicesByCategory 并解析 ng-repeatcode>promise 返回数组对象 subcategories 中的数据，最终应该由内部 ng-repeat 迭代.

I am using 2 nested ng-repeats and the inner one is using the value from the parent iteration of ng-repeat. I have attached a function getServicesByCategory to the inner ng-repeat that calls getServicesByCategoryfrom the DocumentsFactory and resolves the promise to return data in an array object subcategories, which eventually should get iterated by inner ng-repeat.

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

The categories are displaying fine but the sub-categories are not.

这有两个问题.

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

1). The subcategories are being shown the same for every category, and the ones being shown belong to the last category in the outer ng-repeat iteration i.e Utility Services. Instead each category should shows it's own sub-categories.

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

2). The console shows multiple errors of infinite digest cycle aborting due to attempts exceeding than 10 with these errors http://errors.angularjs.org/1.5.6/$rootScope/infdig?p0=10&p1=%5B%5D repeatedly in console. The method getServicesByCategoryis being called in an infinite loop triggering multiple digest cycles.

似乎是一个简单的类别问题，被 Angular 的脏检查和摘要循环复杂化了.

Seems like a simple category problem complicated by Angular's dirty checking and digest cycles.

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

I read multiple threads and posts suggesting to not return a new object inside the function associated with ng-repeat which I am not. I am returning the reference of subcategories.

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

The inner ng-repeat is dependent upon the data from outer one. Binding a function to ng-repeat was only option for me. Is this the right approach? The API's to fetch categories and subcategories are different and I dont have the flexibility to change them. I have been unable to come up with a solution. Just want to right sub-categories against each category.

任何帮助将不胜感激！

注意:在全窗口中打开视图以查看左侧的导航栏.

Note: Open the view in full window to see the navbar on the left.

推荐答案

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

The solution here is to get all the data you need and create an array of categories, each one containing its own sub categories. And use this object in the nested ng-repeats.

请检查我更新的 plunker 版本:

Please check my updated version of your plunker:

https://plnkr.co/edit/BaHOcI4Qa8t5CkbshyCX

如你所见，我使用:

ng-repeat="category in documents.categories"

在外部 ng-repeat 和:

ng-repeat="service in category.subCategories"

在内部.

在控制器中，我按照以下方式构建 category.subCategories:

In the Controller I build the category.subCategories in the following way:

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
}

这篇关于使用带有 ng-repeat 的函数导致无限摘要循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！