2017.4.5
2017.4.17

親子のコントローラー間でイベントの通知・監視を行う方法

AngularJS(1.x)の親子のコントローラー間で、親から子または子から親へのイベント通知と通知されたイベントを監視する方法についてです。

それぞれ、親から子へのイベント通知は「$broadcast」、子から親へのイベント通知は「$emit」、通知されたイベントの監視は「$on」を使います。

目次

  • 親から子へのイベント通知と監視
  • 子から親へのイベント通知と監視
  • 参考リンク

親から子へのイベント通知と監視

イベントの通知を行う親コントローラー($broadcast)


$scope.$broadcast('example1Event', {exampleCount: 123});

イベントの監視を行う子コントローラー($on)


$scope.$on('example1Event', function(event, args) {
    alert(args.exampleCount);   // 123
});

子から親へのイベント通知と監視

イベントの通知を行う子コントローラー($emit)


$scope.$emit('example2Event', {exampleCount: 456});

イベントの監視を行う親コントローラー($on)、方法は$broadcastの時と同じ。


$scope.$on('example2Event', function (event, args) {
    alert(args.exampleCount);   // 456
});

参考リンク

AngularJS】関連記事