Các chỉ thị giao tiếp bằng bộ điều khiển như thế nào?

Question

Trong tài liệu này: http://docs.angularjs.org/guide/directive, nó nói chỉ thị có thể giao tiếp với nhau bằng bộ điều khiển.

điều khiển - Chức năng của trình xây dựng bộ điều khiển. Bộ điều khiển được khởi tạo trước giai đoạn tiền liên kết và nó được chia sẻ với các chỉ thị khác nếu chúng yêu cầu nó theo tên (xem yêu cầu thuộc tính). Điều này cho phép các chỉ thị giao tiếp với nhau và tăng cường hành vi của nhau.

Tôi không hiểu rõ, cách họ liên lạc với bộ điều khiển? Có bất kỳ ví dụ hoặc demo cho nó?

Answer 1

Có lẽ bạn đang bối rối một bộ điều khiển được tạo khi thay đổi tuyến đường xảy ra với bộ điều khiển chỉ thị. Phần đó chỉ nói về các bộ điều khiển chỉ thị, vì vậy phần đó có nghĩa là nếu bạn có hai chỉ thị trên cùng một phần tử HTML, chúng có thể giao tiếp bằng cách yêu cầu các bộ điều khiển khác.

Một ví dụ điển hình là nếu bạn tạo chỉ thị cần liên lạc với ng-model. Kể từ ng-model cho thấy một bộ điều khiển, bạn có thể yêu cầu nó như thế này:

myApp.directive('myDirective', function() { 
    return { 
     require: 'ngModel', 
     link: function($scope, elem, attrs, ngModelCtrl) { 
      // Here you can listen to different DOM events, and 
      // call ngModelCtrl when the model value needs to update 
     } 
    } 
}); 

Và HTML:

<input type="text" ng-model="myModel" my-directive> 

chỉ thị của bạn có thể tiếp xúc với một bộ điều khiển bằng cách thực hiện nó trong đối tượng mà bạn trở về chức năng chỉ thị, như này:

myApp.directive('myDirective1', function() { 
    return { 
     link: function($scope, elem, attrs) { 

     }, 
     controller: function() { 
      this.sayHello = function() { 
       alert("hello!"); 
      } 
     } 
    } 
}); 

myApp.directive('myDirective2', function() { 
    return { 
     require: 'myDirective1', 
     link: function($scope, elem, attrs, myDirective1Ctrl) { 
      myDirective1Ctrl.sayHello(); 
     } 
    } 
}); 

Và HTML:

<input type="text" my-directive2 my-directive1> 

Bạn cũng có thể yêu cầu một bộ điều khiển chỉ thị từ một chỉ thị mẹ bằng cách viết require: '^myParentDirective', như thế này:

myApp.directive('myDirective1', function() { 
    return { 
     link: function($scope, elem, attrs) { 

     }, 
     controller: function() { 
      this.sayHello = function() { 
       alert("hello!"); 
      } 
     } 
    } 
}); 

myApp.directive('myDirective2', function() { 
    return { 
     require: '^myDirective1', 
     link: function($scope, elem, attrs, myDirective1Ctrl) { 
      myDirective1Ctrl.sayHello(); 
     } 
    } 
}); 

Và HTML:

<div my-directive1> 
    <div my-directive2></div> 
</div>