与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-repeats，内部的正在使用ng-repeat父迭代的值.我已将函数getServicesByCategory附加到内部ng-repeat上，该函数从DocumentsFactory调用getServicesByCategory并解析promise以返回数组对象subcategories中的数据，最终应由内部.

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).控制台显示由于尝试超过10次而导致infinite digest cycle中止的多个错误，这些错误 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的dirty checking和digest cycles而变得复杂.

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-repeats中使用该对象.

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.

请检查我的插件的更新版本:

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"

在内心.

在Controller中，我通过以下方式构建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屋！