あるコントローラーを別のコントローラーに呼び出したい場合は、4つの方法を使用できます。
- $ rootScope。$ emit（）および$ rootScope。$ broadcast（）
- 2番目のコントローラーが子の場合、親子通信を使用できます。
- 利用サービス
- ハックの種類-angular.element（）の助けを借りて
1. $ rootScope。$ emit（）および$ rootScope。$ broadcast（）
コントローラとそのスコープは破棄される可能性がありますが、$ rootScopeはアプリケーション全体に残ります。これが、$ rootScopeがすべてのスコープの親であるため、$ rootScopeを使用している理由です。
親から子への通信を行っており、子供でさえ兄弟と通信したい場合は、$ broadcastを使用できます。
子から親への通信を実行していて、兄弟が呼び出されていない場合は、$ rootScope。$ emitを使用できます。
HTML
<body ng-app="myApp">
<div ng-controller="ParentCtrl" class="ng-scope">
// ParentCtrl
<div ng-controller="Sibling1" class="ng-scope">
// Sibling first controller
</div>
<div ng-controller="Sibling2" class="ng-scope">
// Sibling Second controller
<div ng-controller="Child" class="ng-scope">
// Child controller
</div>
</div>
</div>
</body>
Angularjsコード
var app = angular.module('myApp',[]);//We will use it throughout the example
app.controller('Child', function($rootScope) {
$rootScope.$emit('childEmit', 'Child calling parent');
$rootScope.$broadcast('siblingAndParent');
});
app.controller('Sibling1', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside Sibling one');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
app.controller('Sibling2', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside Sibling two');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
app.controller('ParentCtrl', function($rootScope) {
$rootScope.$on('childEmit', function(event, data) {
console.log(data + ' Inside parent controller');
});
$rootScope.$on('siblingAndParent', function(event, data) {
console.log('broadcast from child in parent');
});
});
上記のコードコンソールでは、$ emitの 'childEmit'は子の兄弟の内部を呼び出さず、親の内部のみを呼び出します。$ broadcastは兄弟と親の内部でも呼び出されます。これは、パフォーマンスが動作する場所です。$ emitはいくつかのダーティーチェックをスキップするため、親から子への通信を使用している場合に推奨されます。
2. 2番目のコントローラーが子の場合、子と親の通信を使用できます
その最良の方法の1つです。子が直接の親と通信したい場合に子と親の通信を行いたい場合は、$ broadcastや$ emitは必要ありませんが、親から子への通信を行いたい場合は、 serviceまたは$ broadcastを使用する
たとえばHTML：-
<div ng-controller="ParentCtrl">
<div ng-controller="ChildCtrl">
</div>
</div>
Angularjs
app.controller('ParentCtrl', function($scope) {
$scope.value='Its parent';
});
app.controller('ChildCtrl', function($scope) {
console.log($scope.value);
});
子から親への通信を使用しているときは常に、Angularjsは子の内部の変数を検索します。変数が内部に存在しない場合は、親コントローラー内の値を表示することを選択します。
3.利用サービス
AngularJSは、サービスアーキテクチャを使用して「懸念の分離」の概念をサポートしています。サービスはJavaScript関数であり、特定のタスクのみを実行する責任があります。これにより、サービスは保守およびテストが可能な個別のエンティティになります。Angularjsの依存性注入メカニズムを使用して注入するために使用されるサービス。
Angularjsコード：
app.service('communicate',function(){
this.communicateValue='Hello';
});
app.controller('ParentCtrl',function(communicate){//Dependency Injection
console.log(communicate.communicateValue+" Parent World");
});
app.controller('ChildCtrl',function(communicate){//Dependency Injection
console.log(communicate.communicateValue+" Child World");
});
Hello Child WorldとHello Parent Worldが出力されます。Angularのサービスドキュメントシングルトンによれば、サービスに依存する各コンポーネントは、サービスファクトリによって生成された単一のインスタンスへの参照を取得します。
4.ハックの種類-angular.element（）の助けを借りて
このメソッドは、Id /一意のclass.angular.element（）メソッドによって要素からscope（）を取得し、要素を返します。scope（）は、別の内部の1つのコントローラーの$ scope変数を使用して別の変数の$ scope変数を提供することはお勧めできません。
HTML：-
<div id='parent' ng-controller='ParentCtrl'>{{varParent}}
<span ng-click='getValueFromChild()'>Click to get ValueFormChild</span>
<div id='child' ng-controller='childCtrl'>{{varChild}}
<span ng-click='getValueFromParent()'>Click to get ValueFormParent </span>
</div>
</div>
Angularjs：-
app.controller('ParentCtrl',function($scope){
$scope.varParent="Hello Parent";
$scope.getValueFromChild=function(){
var childScope=angular.element('#child').scope();
console.log(childScope.varChild);
}
});
app.controller('ChildCtrl',function($scope){
$scope.varChild="Hello Child";
$scope.getValueFromParent=function(){
var parentScope=angular.element('#parent').scope();
console.log(parentScope.varParent);
}
});
上記のコードでは、コントローラーはHTMLで独自の値を表示しており、テキストをクリックすると、それに応じてコンソールに値が表示されます。親コントローラースパンをクリックすると、ブラウザーは子の値をコンソールし、逆も同様です。