Использование функции с ng-repeat, вызывающей бесконечный цикл дайджеста

Question

У меня есть следующий фрагмент кода.

https://plnkr.co/edit/Tt7sWW06GG08tdJu72Fg?p=preview. Полностью разверните окно, чтобы увидеть весь вид.

У меня есть categories и sub-categories для отображения в навигационной панели, как показано на приведенном выше рисунке. В каждой категории есть сервисы/подкатегории для отображения.

Я использую 2 вложенных ng-repeats, а внутренний использует значение от родительской итерации ng-repeat. Я приложил функцию getServicesByCategory к внутренним ng-repeat, который вызывает getServicesByCategory из DocumentsFactory и разрешающего promise возвращать данные в объекте массива subcategories, который в конечном итоге должен получить итерированный внутренним ng-repeat.

Категории отображаются в порядке, но подкатегории не являются.

Есть 2 проблемы с этим.

1). Подкатегории показываются одинаково для каждой категории, а показанные из них относятся к последней категории во внешней итерации ng-repeat i.e Utility Services. Вместо этого каждая категория должна показывать собственные подкатегории.

2). Консоль показывает несколько ошибок прерывание из-за попыток, превышающих 10 с этими ошибками http://errors.angularjs.org/1.5.6/ $ rootScope/infdig? P0 = 10 & p1 =% 5B% 5D несколько раз в консоли. Метод getServicesByCategory вызывается в бесконечном цикле, запускающем несколько циклов дайджеста.

Похоже на проблему простой категории, сложную Angular's dirty checking и digest cycles.

Я прочитал несколько потоков и сообщений, предлагающих не возвращать новый объект внутри функции, связанной с ng-repeat, которой я не являюсь. Я возвращаю ссылку subcategories.

inner ng-repeat зависит от данных от outer. Привязка функции к ng-repeat была для меня только вариантом. Правильно ли это? API для выбора категорий и подкатегорий различен, и у меня нет гибкости для их изменения. Я не смог найти решение. Просто хочу, чтобы подкатегории соответствовали каждой категории.

Любая помощь будет высоко оценена!

Примечание: Открыть представление в полном окне, чтобы увидеть навигационную панель слева.

Answer 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 
}