12

Làm cách nào để truy cập bộ điều khiển chỉ thị con? Cụ thể, tôi cần truy cập tất cả các ngModelController (s) có trong một chỉ thị cha. Ví dụ:AngularJS - Truy cập bộ điều khiển chỉ thị con

<parent-directive> 
    <input type="text" ng-model="model1"/> 
    <input type="text" ng-model="model2"/> 
</parent-directive> 

Vì vậy, có một cách để "parentDirective" để có được quyền truy cập vào các ngModelControllers cho "MODEL1" và "MODEL2"?

Trả lời

10

Cập nhật

jqLite extras methods cũng có một phương pháp điều khiển để lấy bộ điều khiển cụ thể liên quan đến yếu tố này. Vì vậy, bạn có thể truy vấn cho các mô hình ng và lấy tên bộ điều khiển là angular.element(el).controller('ngModel').

bộ điều khiển (tên) - truy xuất bộ điều khiển của phần tử hiện tại hoặc phụ huynh của nó. Theo mặc định, truy xuất bộ điều khiển được liên kết với chỉ thị ngController. Nếu tên được cung cấp dưới dạng tên chỉ thị camelCase thì bộ điều khiển cho chỉ thị này sẽ được truy lục (ví dụ: 'ngModel').


góc cũng đặt bộ điều khiển đi kèm với một phần tử trên dữ liệu của nó. Tương tự như trường hợp điều khiển ngModel được kết hợp với chỉ thị có thể truy cập thông qua $ngModelController. Vì vậy, bạn thực sự có thể truy cập nó và sử dụng thể hiện ngModel để làm bất cứ điều gì bạn đang làm. Tuy nhiên đây hoàn toàn là một cách không chuẩn để thực hiện nó, bởi vì $ngModelController không có giấy tờ và không đảm bảo việc triển khai sẽ không thay đổi trong các phiên bản sau.

An thực hiện ví dụ:

.directive('parentDirective', function($timeout){ 
    return{ 
    restrict:'E', 
    link:function(scope, elm){ 
     /*Get the elements with the attribute ng-model, in your case this could just be elm.children()*/ 
     var elms = [].slice.call(elm[0].querySelectorAll('[ng-model]'), 0); 

     /*get the ngModelControllerArray*/ 
     var controllers = elms.map(function(el){ 
      return angular.element(el).controller('ngModel'); 
      //return angular.element(el).data('$ngModelController'); 
     }); 

     /*As a sample implementation i am registering a view value listener for these controller instances*/ 
     controllers.forEach(function(ngModel){ 
     ngModel.$viewChangeListeners.push(logViewChange.bind(null, ngModel)); 
     }); 

     function logViewChange(ngModel){ 
      console.log(ngModel.$name, ngModel.$viewValue); 
     } 
    } 
    } 
}); 

Plnkr

+1

Cám ơn sự cam kết của mình. Đây là giải pháp. Phần crutial là "return angular.element (el) .data ('$ ngModelController');". Dòng này có thể được viết như sau quá "return angular.element (el) .controllwe ('ngModel');". Liên kết tới Plnkr của bạn với sự sửa đổi đó http://plnkr.co/edit/shn6978dFkH3YFfkUnRy?p=preview – Christian

+0

Ồ vâng tôi thực sự đã tha thứ về những tính năng bổ sung jqlite về điều này. Cảm ơn. Tôi sẽ cập nhật câu trả lời của mình. – PSL

Các vấn đề liên quan