지시어는 컨트롤러에서 어떻게 통신합니까?

Question

이 문서에서 : http://docs.angularjs.org/guide/directive, 지시문은 컨트롤러에 의해 서로 통신 할 수 있다고 말합니다.

컨트롤러 - 컨트롤러 생성자 기능. 컨트롤러는 사전 연결 단계 이전에 인스턴스화되며 이름으로 요청하면 다른 지시문과 공유됩니다 (require 속성 참조). 이렇게하면 지시문이 서로 통신하고 서로의 동작을 향상시킬 수 있습니다.

컨트롤러와 어떻게 통신했는지 잘 모르겠습니까? 어떤 예나 데모가 있습니까?

Answer 1

지시문 컨트롤러로 경로가 변경 될 때 생성되는 컨트롤러를 혼동하는 것일 수도 있습니다. 이 섹션은 지시어 컨트롤러에 대해서만 이야기하기 때문에 동일한 HTML 요소에 두 개의 지시문이 있으면 서로 컨트롤러를 요구함으로써 통신 할 수 있다는 것을 의미합니다.

좋은 예는 ng-model과 통신해야하는 지시문을 만드는 경우입니다. ng-model이 컨트롤러를 노출 때문에, 당신은 이런 식으로 필요할 수 있습니다 :

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 
     } 
    } 
}); 

그리고 HTML :

이

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

귀하의 지시어는 같은 물체에 당신의 지시 기능 반환을 구현하여 컨트롤러를 노출 할 수 있습니다 이 :

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(); 
     } 
    } 
}); 

그리고 HTML :

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

,

당신은 또한 다음과 같이 require: '^myParentDirective'를 작성하여 부모 지침에서 지시 컨트롤러가 필요 할 수 있습니다

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(); 
     } 
    } 
}); 

그리고 HTML을 :

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