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