Thuộc tính phạm vi chỉ thị mà không có phạm vi biệt lập trong AngularJS

Question

Có cách nào kế thừa phạm vi gốc trong khi mở rộng nó bằng thuộc tính đã chuyển không?

Tôi muốn chuyển tham số cho chỉ thị có thể sử dụng lại trực tiếp từ mẫu mà không phải thay đổi DOM trong hàm liên kết.

Ví dụ:

<form-input icon="icon-email" label="email" ng-model="data.input"></form-input> 

Đối với một chỉ thị như thế này:

<div class="form-group"> 
     <label>{{label}}</label> 
     <div class="input-group"> 
     <div class="{{icon}}">@</div> 
     <input class="form-control" placeholder="Email" ng-model="mail.email"> 
     </div> 
    </div> 

ng mô hình là trong phạm vi phụ huynh, việc kiểm soát một hình thức toàn bộ trong trường hợp này, nhưng tôi không nghĩ rằng cần lưu trữ các thuộc tính tạo kiểu trong bộ điều khiển.

Có cách nào chuyển trực tiếp tham số trong mẫu mà không tạo phạm vi cách ly không?

Answer 1

Bạn sẽ không thể 'mở rộng' phạm vi gốc như vậy. Tuy nhiên mục tiêu của bạn có thể được thực hiện bằng cách sử dụng các thuộc tính thẻ chỉ thị được tiêm vào hàm liên kết của chỉ thị của bạn.

Vì vậy, ví dụ: để gắn biến label của bạn, chức năng liên kết của chỉ thị của bạn sẽ trông như dưới đây:

link: function ($scope, $element, $attributes) { 
     $scope.label = $scope.$eval($attributes.label); 
     } 

Bạn có thể kiểm tra plunker dưới đây cho một bản demo sống.
http://plnkr.co/edit/2qMgJSSlDyU6VwdUoYB7?p=preview

Answer 2

answer from Angad sẽ hoạt động để liên kết tĩnh, nhưng nếu giá trị của thuộc tính có thể thay đổi sau khi liên kết, điều này sẽ không được cập nhật. Nếu bạn cần điều này, các sollution sẽ vượt qua giá trị như chuỗi thay vì tham khảo:

<form-input icon="icon-email" label="{{email}}" ng-model="data.input"></form-input> 

Trong chỉ thị, thêm một $ quan sát trên thuộc tính để cập nhật các biến phạm vi:

$attributes.$observe('label', function(newValue){$scope.label=newValue}); 

Bây giờ biến phạm vi sẽ tự động thay đổi nếu giá trị thuộc tính thay đổi.