Który wzorzec jest używany w różnych dyrektywach AngularJS w powtórzeniach NZ na podstawie dynamicznych danych

Question

Buduję pulpit dynamicznie z tablicy danych. Wskaźniki to D3.

Mam wybór różnych wskaźników D3 zdefiniowanych w dyrektywach AngularJS. Na mojej stronie mam powtórzenie iteracji ng nad tablicą metryk.

Mam pytanie, jaki jest najlepszy sposób dynamicznego wyboru właściwej dyrektywy na podstawie atrybutu danych w tablicy ng-repeat?

Czy istnieje sposób na stworzenie wzoru fabrycznego, w którym stosowana jest dyrektywa na podstawie wartości wejściowej z tablicy? A może jest jakiś sposób, aby osiągnąć rezultaty wyłącznie za pomocą dyrektyw, dynamicznie włączając inne dyrektywy do dyrektywy?

HTML

<div ng-controller="DashboardCtrl"> 
<div id="oppChart"> 
    <div> 
     <gh-visualization ng-repeat="item in metrics" val="item[0]"></gh-visualization> 
    </div> 
</div> 
</div> 

Metrics array (będzie dynamiczny):

$scope.list = [ 
     { 'title': 'XYX','data-type':'', 'query':'SELECT ...' }, 
     { 'title': 'Revenue', 'data-type':'', 'query':'SELECT ...' } 
     ]; 

dyrektywa D3 na tej podstawie - http://briantford.com/blog/angular-d3.html

Answer 1

Twoje drugie rozwiązanie brzmieć bardziej kanciasty-odniesieniu do odpowiednich. Jeśli więc jest to tylko jedna dyrektywa, która jest dodawana dynamicznie:

app.directive('dynamically',function(){ 
    return { 
    restrict: 'A', 
    compile: function(element,attrs){ 
     var directives = []; 
     if (attrs.dynamically.indexOf(' ') > -1){ 
     directives = attrs.dynamically.split(' ') 
     } else { 
     directives.push(attrs.dynamically) 
     }; 
     var html = '<ANY '; 
     for (var i in directives){ 
     html += directives[i] + '="true" '; 
     }; 
     html += '></ANY>'; 
     element.replaceWith(html) 
    } 
    } 
}) 

To jeden sposób, aby to zrobić.

1) if (attrs.dynamically.indexOf(' ') jest tak, że można wdrożyć wiele dyrektyw w jedno wystąpienie, oddzielone znakiem spacji ('') w tym przykładzie.

2) Dodaję "=" true "" do atrybutu, z którym pracuję, zadając if (attrs.x) {...}, jeśli atrybut x nie ma wartości, nie istnieje, nawet jeśli jest określony i znajduje się w DOM.

Answer 2

Tak, zrobiłem to, jak opisałeś w drugiej opcji.

Utworzono dyrektywę, która ładuje określony szablon, który następnie zawiera inne dyrektywy na podstawie atrybutu typu danych.

directive("dynamicFormInput", ['$http', '$templateCache', function($http, $templateCache){ 
    return { 
     restrict: 'E', 
     //currently need model for map center otherwise can be removed, need to set default in map directive 
     scope: {model: '=', section: '='}, 
     template: '<ng:include src="tpl"></ng:include>', 
     link: function(scope, iElement, iAttrs) { 
      var sectionToLoad = ""; 
      switch(scope.section.sectionTypeId) 
      { 
       case 1: 
        sectionToLoad ='partials/survey/textInput.html'; 
        break; 
       case 2: 
        sectionToLoad = 'partials/survey/selectOneOption.html'; 
        break; 
       case 3: 
        sectionToLoad = 'partials/survey/multiSelectOption.html'; 
        break; 
       case 4: 
        sectionToLoad = 'partials/survey/boolean.html'; 
        break; 
       case 5: 
        sectionToLoad = 'partials/survey/textInput.html'; 
        break; 
       case 6: 
        if(scope.section.sectionId == 13) 
         sectionToLoad = 'partials/survey/addressSelection.html'; 
        else if(scope.section.sectionId == 24) 
         sectionToLoad = 'partials/survey/contactForm.html' 
       break; 
      } 
      if(sectionToLoad!="") 
      { 
       $http.get(sectionToLoad, {cache:$templateCache}); 
       scope.tpl=sectionToLoad; 
      } 
     } 
    } 
}]) 

Wykorzystanie jest wtedy jak:

<accordion 
    close-others="true"> 
    <accordion-group 
     ng-repeat="section in sections" 
     ng-class="{'isGroundTruthed':section.userId==73}" 
     heading="{{section.sectionName}} ({{displaySelection(section)}})"> 

     <dynamic-form-input 
      section="section"> 
     </dynamic-form-input> 

    </accordion-group> 
</accordion> 

można ignorować akordeonie ja akurat użyć jej jako moja pozycja powtarzać więc każda sekcja będzie zawijać.

Edytuj Po prostu wyczyściłem mój kod dyrektywy.

Answer 3

To byłoby ng-switch

<div ng-repeat="item in metrics"> 
    <div ng-switch on="item.type"> 
    <div ng-switch-when="optionA">..include </div> 
    <div ng-switch-when="optionA">..include </div> 
    </div> 
</div>