lặp qua các thuộc tính được cung cấp

Question

Tôi mới đến góc cạnh, tôi có yêu cầu nơi tôi cần thêm nhiều thuộc tính tùy chỉnh vào chỉ thị phần tử tùy chỉnh, <radio-button>. Hiện nay, tôi đang làm như thế này:

<radio-button one-attr="some value" two-attr="some string" three-attr="some other string"><radio-button> 

Tôi có nhiều nút radio trên trang và văn bản tùy chỉnh thuộc tính cho mỗi chỉ thị tùy chỉnh trên trang đó trông lộn xộn. Vì vậy, tôi đang tìm kiếm một thay thế, nơi tôi có thể vượt qua một đối tượng mảng javascript mà vòng trên mỗi chỉ thị tùy chỉnh radio-button.

Ví dụ: (Trong điều khiển)

$scope.values = [{ 
     'one-attr': 'some value', 
     'two-attr': 'some other value', 
     'three-attr': 'another value', 
     /* and so on... */ 
    }, 
    { 
     /* another custom attribute set */ 
    } 
    /* so on */ 
    ] 

và sau đó đến thị tùy chỉnh của tôi, tôi sẽ vượt qua một custom attribute directive như hình dưới đây:

<radio-button ng-repeat="(key, value) in values" loop-attributes="key, value"></radio-button> 

đâu trên loop-attributes là một thuộc tính tùy chỉnh chỉ thị được áp dụng cho chỉ thị phần tử tùy chỉnh.

Vui lòng đề xuất cách thực hiện việc này.

Nếu tôi sai, vui lòng đề xuất cho tôi cách xử lý việc này.

Answer 1

Bạn có thể phải sử dụng dịch vụ biên dịch $ như radiobutton là một chỉ thị tùy chỉnh . Bạn có thể có một chỉ thị cha mẹ có một danh sách các thuộc tính và trong chỉ thị tạo phần tử radiobutton với các thuộc tính và sau đó biên dịch nó. Đã sử dụng loại đầu vào chẳng hạn.

http://plnkr.co/edit/7ANndIuHCFaGyjWkw7sa?p=preview

// custom element 
.directive('customInput', function() { 
    return { 
    replace: true, 
    restrict: 'E', 
    template: '<input type="text"></input>' 
    }; 
}) 

//wrapper directive 
.directive('customInputAttr', function($compile) { 
    return { 
    restrict: 'E', 
    link: function(scope, element, attrs) { 
     // This could be set even in controller 
     scope.elemAttrs = [{ 
     'class': 'class1', 
     'ng-model': 'input1' 
     }, { 
     'class': 'class2', 
     'ng-model': 'input2' 
     }]; 

     angular.forEach(scope.elemAttrs, function(elemAttr) { 
     var customInputElem = angular.element('<custom-input></custom-input>'); 
     angular.forEach(elemAttr, function(value, key) { 
      customInputElem.attr(key, value) 
     }); 

     var elem = $compile(customInputElem)(scope); 
     element.append(elem); 
     }); 

    } 
    }; 
}) 

Answer 2

Bạn sẽ muốn sử dụng một chỉ thị thay thế chính nó bằng các chỉ thị khác. Bạn có thể xem here để biết cách thực hiện điều đó. Tôi đã thực hiện một jsfiddle để cho bạn biết cách hoạt động của tính năng này. Lặp lại phải ở trên phần tử bên ngoài chứ không phải phần tử chứa chính chỉ thị đó. Điều này là do chỉ thị custom-attr của bạn sẽ được phân tích cú pháp trước khi ng-repeat được phân tích cú pháp, do đó, nó sẽ không có giá trị cho attr.

EDIT: Tôi đã bỏ qua bước nhập ở cuối hàm liên kết, xin lỗi. This cập nhật fiddle nên hoạt động. Bạn cần phải biên dịch lại chỉ thị để làm cho chỉ thị ng-click được thêm vào của bạn thực sự hoạt động. Bạn cũng phải đảm bảo thực hiện chức năng bạn đang ràng buộc ng-click để có sẵn cho phạm vi đó, hoặc bằng cách chuyển nó vào hoặc bằng cách sử dụng ng-click="$parent.foo()"