AngularJS : 부분 뷰를 동적으로 페이지로로드

Question

첫 번째 AngularJS 앱 만들기.

ng-repeat : 제목이로드됩니다. 각 제목은 클릭 할 수 있습니다. 제목을 클릭하면 ajax 호출이 더 많은 JSON 데이터를 가져옵니다. 클릭 한 제목 아래에이 데이터를 추가해야합니다.

일반적인 방법으로 HTML을 문자열로 만들어 소스 코드에 추가합니다. 그러나 AngularJS를 사용하고 있기 때문에 HTML과 부분보기를 만드는 방법이 있어야하고 ng-repeat이 있어야합니다.

어떻게이 작업을 수행 할 수 있습니까?

Answer 1

다음은 작은 예입니다. JSON은 각 항목의 json 객체에 subItems 배열로 구성되어 있습니다.

JS :

function MyCtrl($scope, $http) { 
    $scope.items = [ {id: 'a', subItems: []}, {id: 'b', subItems: []} ]; 

    $scope.getSubItems = function(item) { 
    $http.get('/sub-items/' + item.id).then(function(response) { 
     //Append the response to the current list of subitems 
     //(incase some exist already) 
     item.subItems = item.subItems.concat(repsonse.data); 
    }); 
    }; 
} 

HTML :

<div ng-repeat="item in items"> 

    <a ng-click="getSubItems(item)">{{item.id}}</div> 
    <div ng-show="item.subItems.length"> 
    <h4>SubItems:</h4> 
    <ul> 
     <li ng-repeat="subItem in item.subItems">{{subItem}}</li> 
    </ul> 
    </div> 

</div> 

Answer 2

내가 @Nicolas 제안에 따라 지시문을 사용합니다. 이것을 @Andrew가 제안한 것과 결합하면 이런 식으로 할 수 있습니다.

컨트롤러 :

.controller('MainCtrl', function ($scope, $http) { 
    $scope.items = [ 
     {id: 'a', subItems: []}, 
     {id: 'b', subItems: []} 
    ]; 

    $scope.getSubItems = function(id) { 
     $http.get('/sub-items/' + id) 
      .then(function() { 
       $scope.items.subItems = $scope.items.subItems.push(response.data); 
      }); 
    } 
}); 

보기 :

<div ng-repeat="item in items"> 
    <a ng-click="getSubItems(item)">{{item.id}}</a> 
    <list sub-items="item.subItems"></list> 
</div> 

지침 :

페이지에 라우팅 구현을위한 좋은 경기를 같은 소리

.directive('list', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      subItems: '=subItems' 
     }, 
     template: '<ul>' + 
      '<li ng-repeat="subItem in subItems">{{subItem.id}}</li>' + 
      '</ul>' 
    }; 
});