ホームページ >ウェブフロントエンド >jsチュートリアル >Angular でのイベント通信に $on と $broadcast を使用する方法は?

Angular でのイベント通信に $on と $broadcast を使用する方法は?

Susan Sarandon
Susan Sarandonオリジナル
2024-10-26 15:42:02570ブラウズ

How to Use $on and $broadcast for Event Communication in Angular?

Angular でのイベント通信: $on と $broadcast

Angular では、イベント通信はアプリケーションのさまざまな部分間の対話を調整するために重要です。 。 $on と $broadcast は、コンポーネント間でのイベントの効果的なブロードキャストと処理を可能にするコア Angular メカニズムです。

$on と $broadcast について

  • $broadcast: 特定のイベントのすべての子孫 (子スコープ) とスコープの親チェーンに通知するためにスコープによって発行されます。
  • $on: スコープによって登録されます。現在のスコープ、その親スコープ、またはその子スコープからブロードキャストされる特定のイベントをリッスンします。

例でのイベント通信の実装

あなたの場合、フッター コントローラーのクリック イベントによって、コード スキャナー コントローラーで処理できるイベントをトリガーしたいとします。これを達成するには:

1.ブロードキャスター (フッターコントローラー):

  • アプリケーション内のすべてのスコープを網羅するため、$rootScope を使用してイベントをブロードキャストします。
  • フッターコントローラーで次のような関数を定義します。
$scope.startScanner = function() {
    $rootScope.$broadcast('scanner-started');
}

2.受信者 (codeScannerController):

  • $on を使用して codeScannerController でブロードキャスト イベントをリッスンします:
$scope.$on('scanner-started', function(event, args) {
    // Your logic here
});

追加機能:

  • $broadcast('event-name', { any: {} }) を使用してイベントをブロードキャストするときに引数を渡すことができます。
  • したがって、これらの引数は受信者のイベント ハンドラー。

リファレンス ドキュメント:

詳細については、スコープに関する公式 Angular ドキュメントを参照してください: https://docs.angularjs。 org/api/ng/type/$rootScope.Scope

以上がAngular でのイベント通信に $on と $broadcast を使用する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。