Cách tạo các chỉ thị AngularJs có thể tái sử dụng để sao chép các chỉ thị hiện có

Question

Tôi đang trong quá trình tạo một vài chỉ thị có thể sử dụng lại cho các điều khiển chung trong ứng dụng của chúng tôi.

Ví dụ chúng ta có một snip-nó html cho các hộp văn bản số lượng

<div class='amount'> 
    <input type='text' ng-model='dollars'/> 
</div> 

Từ đó tôi bắt đầu để tạo ra chỉ thị của tôi:

app.directive("amount", function(){ 
    return { 
     restrict: "E", 
     template: "<div class='amount'><input type='text'/></div>", 
     replace: true 
    } 
}); 

nào ám chỉ rằng sau <html/>

<div class="amount ng-pristine ng-valid" ng-model="dollars"> 
    <input type="text"> 
</div> 

Bây giờ, ng-model nằm trên <div/> mà không phải là những gì tôi muốn, vì vậy tôi cần phải tạo ra một phạm vi và đính kèm nó vào ngModel và mọi thứ đang hạnh phúc một lần nữa.

app.directive("amount", function(){ 
    return { 
     restrict: "E", 
     scope:{ 
      ngModel: "=" 
     }, 
     template: "<div class='amount'><input type='text' ng-model='ngModel'/></div>", 
     replace: true 
    } 
}); 

Tất cả mọi thứ hoạt động, nhưng cho phép nói rằng tôi muốn cũng thêm vào một chỉ thị ngChange, điều đó có nghĩa là tôi lại cần phải thay đổi scope tôi để bao gồm ngChange: "="? Giống như rất

app.directive("amount", function(){ 
    return { 
     restrict: "E", 
     scope:{ 
      ngModel: "=", 
      ngChange : "=" 
     }, 
     template: "<div class='amount'><input type='text' ng-model='ngModel'/></div>", 
     replace: true 
    } 
}); 

Các Câu hỏi

Tôi có cần phải liên tục sửa đổi phạm vi chỉ thị để bao gồm một số lượng vô hạn có thể xảy ra chỉ thị khác mà tôi có thể yêu cầu? Hoặc có cách sao chép các chỉ thị trên phần tử <amount/> không đến số <div/> nhưng đến số <input/>

Ví dụ:

<amount my-awesome-directive="" ng-disabled="form.$invalid" ng-model="dollarsAndCents" ng-click="aClick()" ng-show="shouldShow()"/> 

Hóa vào

<div class="amount"> 
    <input my-awesome-directive="" type="text" ng-disabled="form.$invalid" ng-click="aClick()" ng-show="shouldShow()" ng-model="dollarsAndCents"/> 
</div> 

một cái gì đó có thể được thực hiện trong thời gian trước/sau biên dịch để sao chép chúng qua hay tôi sẽ về điều này hoàn toàn sai?

Cập nhật

tôi đã có thể để có được một cái gì đó làm việc qua chỉ đơn giản lặp qua tất cả các thuộc tính và sử dụng dịch vụ $compile(). Nó hoạt động, nhưng điều này có đúng không?

app.directive("amount", function ($compile) { 
    return { 
     restrict: "E", 
     template: "<div class='amount'><input type='text' /></div>", 
     replace: true, 
     compile: function compile(tElement, tAttrs) { 
      return function (scope, iElement, iAttrs) { 
       var attributes = $(iElement).prop("attributes"); 
       var $input = $(iElement).find("input"); 
       $.each(attributes, function() { //loop over all attributes and copy them to the <input/> 
        if (this.name !== "class") { 
         $input.attr(this.name, this.value); 
        } 
       }); 
       $compile($input)(scope); //compile the input 
      }; 
     } 
    }; 
}); 

Với <html/> sau đây nếu bạn thêm bất kỳ chỉ thị cho <amount/> nó được sao chép xuống <input/>

<div ng-app="app"> 
     <amount ng-model="dollars" ng-change="changed = 'I Changed!!!'" ng-click="clicked= 'I Clicked It!'" name="amount"></amount> 
     <h1>{{dollars}}</h1> 
     <h2>{{changed}}</h2> 
     <h3>{{clicked}}</h3> 
     <input type="button" value="Remove" ng-click="items.splice(items.indexOf(item), 1)"/> 
     <hr/> 
</div> 

updated jsfiddle

Answer 1

Bind một bộ điều khiển và bơm $scope cho dễ dàng.

.controller('Amount', ['$scope', function($scope) { 
    $scope.myMoney = '2'; 
}]) 

.directive("amount", function(){ 
    restrict: 'EA', 
    replace: true, 
    controller: 'Amount', 
    template: "<div class='amount'><input type='text' ng-model='myMoney'/></div>", 
    //Cleaner to include as URL if the partial is bigger. 
    //templateUrl: '/views/amount.html', 
    link: function(scope, controller) {} 
});