ng-repeat에서 무한 다이제스트 루프를 발생시키는 함수 사용

Question

다음 코드가 있습니다.

https://plnkr.co/edit/Tt7sWW06GG08tdJu72Fg?p=preview. 전체 화면을 보려면 창을 완전히 확장하십시오.

나는 위의 그림과 같이 navbar에 표시 할 categories과 sub-categories입니다. 각 카테고리에는 표시 할 서비스/하위 카테고리가 있습니다.

두 개의 중첩 된 ng-repeats을 사용하고 있으며 내측은 ng-repeat의 부모 반복의 값을 사용하고 있습니다. DocumentsFactory에서 getServicesByCategory을 호출하고 을 호출하여 배열 객체 subcategories에 데이터를 반환하도록 결정하는 내부 을 내부 번호 ng-repeat에 의해 반복적으로 처리해야합니다.

카테고리가 잘 표시되지만 하위 카테고리는 그렇지 않습니다.

두 가지 문제가 있습니다.

1). 하위 카테고리는 모든 카테고리에서 동일하게 표시되며, 표시된 카테고리는 외부 ng 반복 반복의 마지막 카테고리에 속합니다. 즉 Utility Services입니다. 대신 각 카테고리에는 자체 하위 카테고리가 표시되어야합니다.

2). 콘솔에 $ rootScope/infdig? p0 = 10 & p1 = % 5B % 5D이 (가) 반복적으로 발생하는 오류로 인해 infinite digest cycle의 오류가 10 개를 초과하여 중단되었습니다. getServicesByCategory 메서드는 여러 다이제스트 사이클을 트리거하는 무한 루프에서 호출되고 있습니다.

Angular의 dirty checking 및 digest cycles에 의해 간단한 카테고리 문제가 복잡해 보입니다.

나는 여러 스레드와 게시물을 읽고 ng-repeat와 관련된 함수 내에서 새 객체를 반환하지 않을 것을 제안합니다. 나는 subcategories의 참조를 반환합니다.

ng-repeat는 outer의 데이터에 따라 다릅니다. ng-repeat에 함수를 바인딩하는 것은 나를위한 유일한 옵션이었습니다. 이것이 올바른 접근 방법입니까? 카테고리와 하위 카테고리를 가져 오는 API는 다르기 때문에 변경할 수있는 유연성이 없습니다. 나는 해결책을 찾을 수 없었다. 각 카테고리에 맞는 하위 카테고리를 만들고 싶습니다.

도움이 될 것입니다!

참고 :보기를 전체 창에서 열면 왼쪽에있는 탐색 모음이 표시됩니다.

Answer 1

여기 해결책은 필요한 모든 데이터를 얻고 각 범주에 자체 하위 범주가 포함 된 범주 배열을 만드는 것입니다. 그리고 중첩 된 ng-repeats에서이 개체를 사용하십시오.외부 ng-repeat에서

ng-repeat="category in documents.categories" 

과 : 당신이 볼 수 있듯이

https://plnkr.co/edit/BaHOcI4Qa8t5CkbshyCX

, 내가 사용

당신의 plunker 내 업데이트 된 버전을 확인하시기 바랍니다

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 
}