작은 중첩 된 자식 쿼리 무한 루프

Question

각 부모로부터 자식 목록을 검색하려면 쿼리를 실행해야합니다.

HTML :

<tr ng-repeat="parent in parents"> 
    <td>{{parent.id}}</td> 
    <td>{{parent.name}}</td> 
    <td> 
     <li ng-repeat="child in getChildren(parent.id)"> 
      {{child}} 
     </li> 
    </td> 
</tr> 

JS는 :

app.controller('mainCtrl', function($scope, Restangular) { 
... 
$scope.getChildren = function(parentId) { 
    console.log(parentId); //called over and over 

    //should GET e.g. /api/parents/1/children 
    return Restangular.one('parents', parentId).getList('children').then(function(children) { 
     console.log(JSON.stringify(children)); //never hit 
     return children; 
    }) 
} 

나는 올바른 API 엔드 포인트가 호출지고 볼 수 있지만, getChildren() 함수는 같은 parentId 반복적으로 호출된다. 또한 결코 돌아 오지 않는 것처럼 보입니다. 나는 그것의 명백한 무엇인가 확실하다 - 나는 무엇을 잘못하고 있냐?

이 예제와 관련된 것 같습니다 : Infinite loop with Angular expression binding 그러나이 예제에서는 Restangular를 사용하지 않습니다.

Answer 1

나는 그것이 무한히 실행되는 이유를 모르겠습니다. AngularJs의 다이제스트주기와 관련이 있습니다.

완전히이 문제를 방지하려면, 하나 개의 솔루션이 될 수있다 :

당신은 $scope.parents 변수가 있습니다. 그 변수에서 (또는 적어도 한 번 초기화 것) 당신은 할 수 :

$scope.children = {}; 

for (var parent in $scope.parents) { 
    // store parent id for easy access 
    var parentId = $scope.parents[parent].id; 
    // get the children 
    Restangular.one('parents', parentId).getList('children') 
     .then(function(children) { 
     // access the parentResource object of the returned object to 
     // get the parent id 
     $scope.children[children.parentResource.id] = children; 
    }) 
} 

이 방법은, 아이들은 (부모 ID로 키가) 객체를 통해 액세스 할 수 있습니다. 그렇다면 html에서 다음과 같을 것입니다 :

<li ng-repeat="child in children[parent.id]"></li> 

함수 호출을 작성하는 대신 $ scope 변수에 액세스하는 것입니다.