ホームページ > ウェブフロントエンド > jsチュートリアル > `$scope.$emit` と `$scope.$on` は AngularJS コントローラーでのイベント通信をどのように促進しますか?

`$scope.$emit` と `$scope.$on` は AngularJS コントローラーでのイベント通信をどのように促進しますか?

Mary-Kate Olsen
リリース: 2024-12-11 11:58:12
オリジナル
992 人が閲覧しました

How Do `$scope.$emit` and `$scope.$on` Facilitate Event Communication in AngularJS Controllers?

$scope.$emit と $scope.$on

$scope.$emit と $scope.$ を使用したコントローラーでのイベント通信は、コントローラー間のイベント通信を容易にするために不可欠な AngularJS メソッドです。ただし、効果的な実装には、その正確な動作を理解することが重要です。

$emit メソッド

$emit は、コントローラーからイベントをディスパッチし、スコープ階層を通じて上向きに送信します。 。これにより、コントローラーが親スコープや他の子スコープと通信できるようになります。

$on メソッド

$on は、他のコントローラーによって発行されたイベントをリッスンします。そのコールバック関数は、渡されたデータなど、発行されたイベントに関する詳細を含むイベント オブジェクトを受け取ります。

一致するイベント名

$emit と $on を使用する場合、重要です。一致するイベント名を使用します。イベント名によって、どのコントローラがイベントを受信するかが決まります。

スコープの関係

コントローラのスコープ間の関係によって、どの通信方法が有効かが決まります。

親子関係

において親子スコープ関係、親コントローラー (送信) の $broadcast と子コントローラー (リスニング) の $on で十分です。

例:

function firstCtrl($scope) {
    $scope.$broadcast('someEvent', [1,2,3]);
}

function secondCtrl($scope) {
    $scope.$on('someEvent', function(event, mass) { console.log(mass); });
}
ログイン後にコピー

親子関係がない場合

親子関係がない場合関係を構築し、コントローラーに $rootScope を挿入し、$rootScope.$broadcast を使用すると、イベントがすべてのスコープに確実に到達します。

例:

function firstCtrl($rootScope) {
    $rootScope.$broadcast('someEvent', [1,2,3]);
}
ログイン後にコピー

イベント子から親へのディスパッチ

子からイベントをディスパッチするには親スコープにするには、子コントローラーで $scope.$emit を使用し、親コントローラーで $scope.$on を使用します。

例:

function firstCtrl($scope) {
    $scope.$on('someEvent', function(event, data) { console.log(data); });
}

function secondCtrl($scope) {
    $scope.$emit('someEvent', [1,2,3]);
}
ログイン後にコピー

以上が`$scope.$emit` と `$scope.$on` は AngularJS コントローラーでのイベント通信をどのように促進しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート