Mô hình nào để sử dụng cho các chỉ thị AngularJS khác nhau trong một ng-lặp lại dựa trên dữ liệu động

Question

Tôi đang xây dựng một bảng điều khiển động từ một mảng dữ liệu. Đồng hồ đo là D3.

Tôi có một lựa chọn các đồng hồ đo D3 khác nhau được xác định trong chỉ thị AngularJS. Trên trang của tôi, tôi lặp lại lặp lại qua mảng chỉ số.

Câu hỏi tôi có là cách tốt nhất để chọn động chỉ thị đúng dựa trên thuộc tính dữ liệu trong mảng ng-repeat là gì?

Có cách nào để tạo mẫu nhà máy nơi Chỉ thị được sử dụng dựa trên giá trị đầu vào từ mảng không? Hoặc có cách nào để đạt được kết quả chỉ bằng cách sử dụng Chỉ thị bằng cách bao gồm các Chỉ thị khác trong Chỉ thị không?

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 mảng (sẽ được động):

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

D3 Chỉ dựa vào điều này - http://briantford.com/blog/angular-d3.html

Answer 1

giải pháp thứ hai của bạn âm thanh góc-apropriate hơn. Vì vậy, nếu chỉ là một chỉ thị duy nhất được thêm động

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

Đó là một cách để thực hiện.

1) if (attrs.dynamically.indexOf(' ') là để bạn có thể triển khai nhiều chỉ thị thành một phiên bản, được phân cách bằng dấu cách ('') trong ví dụ này.

2) Tôi thêm '=' true '' vào thuộc tính mà tôi làm việc bằng cách yêu cầu if (attrs.x) {...}, nếu thuộc tính x không có giá trị, nó không tồn tại ngay cả khi được nêu và nằm trên DOM.

Answer 2

Yup Tôi đã thực hiện điều này khi bạn mô tả trong tùy chọn thứ hai của mình.

Tôi đã tạo một chỉ thị tải mẫu cụ thể sau đó có các chỉ thị khác trong đó dựa trên thuộc tính loại dữ liệu.

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

Cách sử dụng sau đó như:

<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> 

Bạn có thể bỏ qua accordion Tôi chỉ tình cờ sử dụng như mục của tôi lặp lại vì vậy mỗi phần sẽ gấp lên.

Chỉnh sửa Chỉ cần dọn sạch mã chỉ thị của tôi một số.

Answer 3

Đó sẽ là 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>