ajax를 통해 호출 된 페이지에서 angularJS 지시문을 사용하는 방법은 무엇입니까?

Question

나는 (아약스를 통해 직접 액세스하거나 호출 할 수 있습니다) 다음과 같은 HTML이 있습니다

<section id="content" ng-controller="setTreeDataCtrl" get-subthemes> 
<dl ng-repeat="subtheme in allSubthemes"> 
    <dt>{{subtheme.Title}}</dt> 
</dl> 

다음

나는 다음과 같은 지시문을 사용하고 있습니다 :

myApp.directive('getSubthemes', function() { 
return function($scope, element, attrs) { 
    $scope.allSubthemes = []; 
    angular.forEach($scope.data.Themes, function(value, key) { 
     angular.forEach(value.SubThemes, function(value2, key2) { 
      $scope.allSubthemes.push({ 
       'ThemeTitle': value.Title, 
       'ThemeUrlSlug': value.UrlSlug, 
       'Title': value2.Title, 
       'UrlSlug': value2.UrlSlug 
      }); 
     }); 
    }); 
} 
}); 

$ scope.allSubthemes을 괜찮아 보이지만 dl은 렌더링되지 않습니다. 두 번째로 제대로 렌더링 된 것을 볼 수 있으며, {{subtheme.Title}}로 되돌아갑니다. 거의 "렌더링되지 않은"것처럼 ... 내가 잘못하고있는 것에 대한 아이디어가 있습니까?

데모 jsFiddle : http://jsfiddle.net/HMp3a/

Answer 1

rGil는 jsFiddle 고정. 요소에 ng-app="pddc" 선언이 누락되어서 Angular는 어디서 마법을 시작해야할지 몰랐습니다.

다른 데이터를 렌더링하는 방법에 대해 말씀 드리고 싶습니다. ng-repeat 내에서 ng-repeat을 사용하는 것이 좋습니다. 내 갈퀴 & 업데이트 된 바이올린 here을 참조하십시오. subtheme의 ng-repeat에있는 부모 테마를 실제로 참조 할 수 있으므로 부모 테마의 값을 각 subtheme로 복사 할 필요가 없습니다 (이 예에서는 지시문이 필요하지 않습니다).

중첩 된 ng-repeat을 사용하는 또 다른 이유는 웹 서비스에서 비동기 적으로 데이터를 가져올 때 발생할 수있는 비동기 문제 때문입니다. 일어날 수있는 일은 지시어가 실행될 때 데이터가 아직 도착하지 않았기 때문에 루핑하고 채울 데이터가 없을 수 있습니다.

두 개의 ng 반복을 사용하는 경우 Angular는 $scope.data을보고 데이터가 도착하면 ng 반복을 다시 실행합니다. 웹 서비스 대기 시간을 시뮬레이트하기 위해 예제에서 데이터를 설정하는 데 500 밀리 초의 지연을 추가했으며 "대기 시간"이 있더라도 데이터가 결국 렌더링됩니다. 은 "해결"수동으로 데이터를 볼 수있는 사용자의 지시에

1. 사용 scope.$watch(), 또는
2. 를 사용하여 각도의 routing feature에서 기능이 있는지 확인 :

   비동기 문제의 주위에 다른 두 가지 방법이 있습니다 데이터는 컨트롤러 실행 전에 검색됩니다.

이러한 대체 방법이 작동하는 동안 두 가지 모두 더 복잡하고 두 번의 반복을 사용한다고 생각합니다.