Angularjsにおけるコントローラー間の通信方法例まとめ

この記事では、AngularJS で実装されているコントローラー間の通信方法を主に紹介し、AngularJS コントローラーの一般的な通信方法とそれに関連する操作上の注意点をサンプル形式でまとめて分析しています。 Angularjs 間の通信メソッドのコントローラーの実装。参考のために皆さんと共有してください。詳細は次のとおりです:

angularjs を使用した開発プロジェクトでは、パラメーターやデータの転送など、コントローラー間の通信が比較的一般的です。コントローラー間の通信は特に重要です。一般的な方法は 2 つあり、1 つ目は angular サービス方法、2 つ目はイベント ブロードキャストに基づく方法、さらにスコープ継承に基づく方法です。まず最初の 2 つのメソッドについて説明しましょう:

1. Angular サービスに基づくメソッド: Angular では、サービスはシングルトンであるため、サービス内でオブジェクトが生成され、オブジェクトは依存関係注入を使用できます。メソッドはすべてのコントローラーで共有されます。次の例を参照してください。サービス オブジェクトの値が 1 つのコントローラーで変更され、変更された値が別のコントローラーで取得されます。

イベント ブロードキャストに基づいて、$emit()、$broadcaset()、および $emit() の 3 つのメソッドを使用する必要があります。

1. カスタム イベントを親スコープ階層に送信します: $emit() メソッド、scope.$emit(name,[args,...]) を使用します。

注:

name はイベント名、args は 0 個以上のパラメーターです。

アプリケーションシナリオ:

子ページコントローラーから親ページコントローラーにパラメーターを渡すために使用されます。 2. カスタム イベントをサブスコープ階層にブロードキャストします:

アプリケーション シナリオ:

親ページ コントローラーが子ページ コントローラーにパラメーターを渡す、または兄弟コントローラー間でパラメーターを渡すために使用されます。 $emit()、$broadcaset()和$emit()这三个方法。

1. 向父作用域层次结构发出自定义事件：使用$emit()方法，scope.$emit(name,[args,...])

注：name是事件名，args 是0个或多个参数。

应用场景：用于子页面控制器向父页面的控制器传递参数。

2. 向子作用域层次结构广播自定义事件：

应用场景：用于父页面控制器向子页面的控制器传递参数或者同级控制器之间传递参数。

使用$broadcaset()方法，$scope.$broadcaset(name,[args,...])

注：name是事件名，args 是0个或多个参数.

3. 使用侦听器处理自定义事件

为了处理发出或广播的事件，可以使用$on()方法。$on()方法将使用下面的语法：

$scope.$on(name,listener)

注：name 是将要侦听的事件的名字，listener参数是一个函数，它将接受事件作为第一个参数，接受$emit()或者$broadcaset()方法传递的其他所有参数作为随后的参数。$on()方法主要用于监听$emit()和$broadcaset()

$broadcaset() メソッド、$scope.$broadcaset(name,[args,...]) を使用します

注:

name はイベントですname、args は 0 個以上のパラメータです。

3. リスナーを使用してカスタム イベントを処理します

発行されたイベントまたはブロードキャスト イベントを処理するには、$on() メソッドを使用できます。 $on() メソッドは次の構文を使用します:

$scope.$on(name,listener)

注:

name は、リスナー パラメータはイベントを最初のパラメータとして受け入れる関数であり、他のすべてのパラメータは $emit() または $broadcaset() によって渡されます。 > メソッドを後続のパラメータとして使用します。 $on() メソッドは主に、$emit() メソッドと $broadcaset() メソッドのイベントの変更を監視するために使用されます。これら 2 つのメソッド 変数が変更されると、$on() メソッドは変数の変更を取得します。

次の例を参照してください。あるコントローラーで変数の値が変更されると、変更された値は別のコントローラーで認識され、変更された値に従って応答します。

var app = angular.module('myApp', []);
app.factory('Myservice', function(){
 return {};
});
//定义服务
app.controller('Ctrltest1', function($scope, 'Myservice') {
 $scope.change = function() {
  Myservice.name = $scope.test; //在第一个控制器中为服务对象赋值
 };
});
app.controller('Ctrltst2', function($scope, 'Myservice') {
 $scope.add = function() {
  $scope.name = Myservice.name; //将第一个控制器中为服务对象赋的值传给第二个控制器
 };
});

2 番目のコントローラーは、1 番目のコントローラーのブロードキャスト イベントをリッスンします:

<p ng-controller=&#39;Ctrltest1&#39;>
  <input type="text" ng-model="test" />
  <p ng-click="change()">click me</p>
</p>
<p ng-controller=&#39;Ctrltest2&#39;>
 <p ng-click="add()">my name {{name}}</p>
</p>

上記は私がまとめたもので、将来的に皆さんのお役に立てれば幸いです。
関連記事:

Jqueryの具体的な例でAJAXを使用するタイミングとAJAXを使用すべき場所を紹介

🎜jqueryをphpと組み合わせてAJAXロングポーリングを実装する🎜🎜🎜🎜🎜JavaScript、Ajax、jQueryの予備理解, そして、3人の関係性を比べてみましょう🎜🎜🎜🎜🎜🎜🎜🎜🎜

以上がAngularjsにおけるコントローラー間の通信方法例まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。