Dynamicznie wyświetlając szablon w dyrektywie ng-repeat w AngularJS?

Question

Próbuję dynamicznie wyświetlać jeden z kilku szablonów w dyrektywie ng-repeat, na podstawie bieżącego elementu.

Moje dane JSON wygląda następująco:

data: { 
    groups: [ 
     { 
      name: "Group 1",     
      sections: [ 
       { name: "Section A" }, 
       { name: "Section B" } 
      ] 
     }, 
     { 
      name: "Group 2",     
      sections: [ 
       { name: "Section A" }, 
       { name: "Section B" } 
      ] 
     } 
    ] 
} 

Moim celem jest uczynienie drzewo danych dynamicznie, przy czym każda grupa zawiera wiele sekcji. Grupy będą miały ten sam szablon, ale każda sekcja powinna mieć własny szablon oparty na polu nazwy.

Zakładając najwyższym poziomie HTML jest:

<div ng-repeat="group in groups"> 
    {{ group.name }} 
    <div ng-repeat="section in sections"> 
     <!-- Dynamic section template used --> 
    </div> 
</div> 

Idealnie, każdy odcinek będzie również mieć swoje własne dane i lunetą kontroler z nim związane. Mam szczęście budowania tego typu systemu z Knockout, ale staram się zrozumieć Angularny sposób robienia rzeczy.

Answer 1

Można zrobić coś takiego:

<div ng-repeat="group in groups"> 
    {{ group.name }} 
    <div ng-repeat="section in sections" ng-include="getIncludeFile(section)"> 
     <!-- Dynamic section template used --> 
    </div> 
</div> 

Następnie w kontrolerze:

$scope.getIncludeFile = function(section) { 
    // Make this more dynamic, but you get the idea 
    switch (section) { 
     case "Section A": 
      return 'partials/sectiona.html'; 
     case "Section B": 
      return 'partials/sectionb.html'; 
    } 
} 

Wtedy twój sectiona.html mógłby wyglądać następująco (mieć kontroler specyficzne dla tego pliku):

<div ng-controller="SectionAController"> 
    <!-- HTML in here, and can bind straight to your SectionAController --> 
</div> 

Answer 2

W poprzednim miesiącu dokonano sprawdzenia pod kątem kątowym w celu obsługi dynamicznych szablonów w dyrektywy jednak nie byłem w stanie znaleźć bardzo wielu informacji dotyczących jego wykorzystania. Oto referencja. https://github.com/angular/angular.js/pull/1849

Mimo to nadal korzysta z tego samego nginclude to wszystko jest zamknięty w dwóch dyrektyw:

Demo: http://plnkr.co/edit/4DIlHMNlHQ8Wm9XHNycH?p=preview

HTML:

<groups-control groupdata="groups"></groups-control> 

Kontroler:

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
    var json = {data: { 
    groups: [ 
     { 
      name: "Group 1",     
      sections: [ 
       { name: "Section A" }, 
       { name: "Section B" } 
      ] 
     }, 
     { 
      name: "Group 2",     
      sections: [ 
       { name: "Section A" }, 
       { name: "Section B" } 
      ] 
     } 
    ] 
    }}; 
    $scope.groups = json.data.groups; 

}); 

Dyrektywa podzielona na dwie części:

app.directive('groupsControl', function(){ 
    return { 
     restrict: 'E', 

     replace: true, 
     transclude: false, 
     scope: { items:'=groupdata'}, 

     template: '<div ng-repeat="group in items">' + 
        '{{ group.name }}' + 
        '<section-control sections="group.sections" />'+ 

       '</div>', 
     // The linking function will add behavior to the template 
     link: function(scope, element, attrs) { 


     } 
    } 
    }).directive('sectionControl', function(){ 
    return { 
     restrict: 'E', 

     replace: true, 
     transclude: false, 
     scope: { items:'=sections'}, 

     template: '<div ng-repeat="section in items" ng-include="getIncludeFile(section)">'+ 
       '</div>', 

     link: function(scope, element, attrs) { 
     scope.getIncludeFile = function(section) { 
      return section.name.toLowerCase().replace('section ','') + ".html"; 
     } 

     } 
    } 
    }); 

Chciałbym zobaczyć, jak ktoś wysyła odpowiedź za pomocą funkcji dla szablonuUrl na podstawie niektórych danych zakresu.