AngularJS'de ng tekrarlama yönergesinde dinamik olarak şablon gösteriliyor mu?

Question

Geçerli öğeye bağlı olarak ng-yineleme yönergesi içinde birkaç şablondan birini dinamik olarak görüntülemeye çalışıyorum.

Benim JSON veri şöyle görünür:

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

Amacım birden bölümleri içeren her grupla, dinamik veri ağacı kılmaktır. Grupların hepsi aynı şablona sahip olacak, ancak her bölüm ad alanına dayalı olarak kendi şablonuna sahip olmalıdır. Üst düzey HTML varsayarsak

geçerli:

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

İdeal her bölüm aynı zamanda kendi kapsamlı veri ve onunla ilişkili denetleyicisi olması gerekir. Knockout ile bu tür bir sistemi inşa etmek için iyi şanslar kazandım ama bir şeyler yapmanın Açısal yolunu anlamaya çalışıyorum.

Answer 1

Böyle bir şey yapabileceğini: Kumandanızda içinde Sonra

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

:

$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'; 
    } 
} 

Sonra sectiona.html (o dosyaya özgü bir denetleyici olması) bu gibi görünebilir:

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

Answer 2

Geçtiğimiz ay içinde dinamik şablonların desteklenmesi için açısal olarak bir denetim yapıldı. bir yönerge ancak kullanımıyla ilgili çok fazla bilgi bulamadım. İşte referans. https://github.com/angular/angular.js/pull/1849

bu hala her iki direktifleri enkapsüle aynı nginclude kullansa da:

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

HTML:

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

Denetleyici:

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; 

}); 

Direktif ikiye bölünmüştür:

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"; 
     } 

     } 
    } 
    }); 

Aslında, birileri kapsam verilerinin bazılarına dayalı olarak templateUrl işlevini kullanarak yanıt göndermeyi görmek isterim.