AngularJS で $on と $broadcast を使用してコントローラー間の通信を促進するにはどうすればよいですか?

Angular でのイベントの伝播: $on と $broadcast を理解する

AngularJS アプリケーションでは、さまざまなコントローラー間の通信で、多くの場合、イベント。このプロセスを容易にする 2 つのメソッドは、$on と $broadcast です。

$broadcast

$broadcast を使用すると、コントローラーはすべての子コントローラーにイベントを送信でき、そのイベントをリッスンするために登録されている他のコントローラーに送信します。 $broadcast を使用してイベントを送信するには:

<code class="javascript">$rootScope.$broadcast('event-name');</code>

$rootScope は、Angular アプリケーション内の他のすべてのスコープの親スコープであるため、使用されます。

$on< /h3>

$on を使用すると、コントローラーは他のコントローラーまたはその親コン​​トローラーによってブロードキャストされたイベントをリッスンできます。 $on を使用してイベントをリッスンするには:

<code class="javascript">$scope.$on('event-name', function(event, args) {
  // Do something when the event is received
});</code>

$on の最初のパラメーターはリッスンするイベントの名前で、2 番目のパラメーターはイベントが発生したときに実行されるコールバック関数です。受け取った。コールバック関数は、オプションで 2 つのパラメータ「event」と「args」を受け取ることができます。

例

質問で説明されている状況を考えてみましょう:

<code class="javascript">angular.module('myApp').controller('footerController', ["$scope", function($scope) {}]);

angular.module('myApp').controller('codeScannerController', ["$scope", function($scope) {
  $scope.startScanner = function() {
    // Do something when the button is clicked
  };
}]);</code>

これらのコントローラー間の通信を有効にするには、次のように $broadcast と $on を使用できます。

footerController 内:

<code class="javascript">$scope.startScanner = function() {
  $rootScope.$broadcast('scanner-started');
}</code>

codeScannerController 内:

<code class="javascript">$scope.$on('scanner-started', function(event, args) {
  // Do something when the 'scanner-started' event is received
});</code>

footerControllerのボタンをクリックすると、スキャナー開始イベントがブロードキャストされます。このイベントは codeScannerController によって受信および処理され、必要なアクションを実行できるようになります。

引数の受け渡し

イベントと一緒に引数を渡すこともできます。 $rootScope.$broadcast メソッドを使用します。例:

<code class="javascript">$rootScope.$broadcast('scanner-started', { any: {} });</code>

これらの引数は、$on のコールバック関数でアクセスできます:

<code class="javascript">$scope.$on('scanner-started', function(event, args) {
  var anyThing = args.any;
  // Do what you want to do
});</code>

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