ディレクティブはコントローラによってどのように通信されますか？

Question

この文書では、http://docs.angularjs.org/guide/directiveと、ディレクティブがコントローラによって互いに通信する可能性があるとしています。

コントローラ - コントローラコンストラクタ機能。コントローラは事前リンクフェーズの前にインスタンス化され、名前で要求すると他のディレクティブと共有されます（require属性を参照）。 これにより、ディレクティブは互いに通信し、互いの動作を強化することができます。

私はコントローラとどのように通信したのですか？それのための例やデモはありますか？

Answer 1

おそらく、ディレクティブコントローラでルート変更が発生したときに作成されるコントローラを混乱させることでしょう。このセクションでは、ディレクティブコントローラについてのみ説明しています。したがって、同じHTML要素に2つのディレクティブがある場合、それらのディレクティブはコントローラを要求することによって通信できます。

その良い例は、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> 

あなたのディレクティブは次のように、そのあなたのディレクティブ関数が返すオブジェクトでそれを実装することにより、コントローラを公開することができng-modelは、コントローラを公開しているので、あなたはこのようにそれを必要とすることができますこの：

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>