AngularJS: dynamicznie ładuj widok częściowy do strony

Question

Tworzenie mojej pierwszej aplikacji AngularJS.

A ng-repeat: er ładuje tytuły. Każdy tytuł jest klikalny. Po kliknięciu tytułu wywołanie ajaxowe powoduje otrzymanie większej ilości danych JSON. Muszę dodać te dane poniżej klikniętego tytułu.

Normalny sposób, chciałbym utworzyć HTML jako ciąg i dołączyć go do kodu źródłowego. Ale ponieważ używam AngularJS, powinien istnieć sposób na stworzenie częściowego widoku z HTML i innym ng-repeat w tym.

Jak można tego dokonać?

Answer 1

Oto mały przykład: Twój JSON ma prostą strukturę, z tablicą subItems w obiekcie json każdego przedmiotu.

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

użyłbym dyrektywę zgodnie @Nicolas sugestii. Łącząc to z tym, co sugerował @Andrew, możesz zrobić coś takiego.

Kontroler:

.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); 
      }); 
    } 
}); 

Widok:

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

dyrektywa:

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