AngularJS1.x その0009 イベントリスニングの開始と任意のタイミングでイベントを発生させる方法 $on, $emit, $broadcast

参考にさせて頂いたページ

【AngularJS】 $on, $emit, $broadcast | COTeggのバケツ

ng-app.jsの記述内容

例として以下の通り。

// myAppモジュールを作成
var app = angular.module('myApp', []);

// myAppモジュールにParentCtrlコントローラーを登録
app.controller('ParentCtrl', function($scope) {
  $scope.parentHoge = 'parentのhogeです。';
  console.log('childEventの監視を開始します。');
  $scope.$on('childEvent', function(event, args) {
    // childEvent発生時に実行される処理
    console.log(event.name + 'の発生が確認されました。');
    console.log(event);
    console.log('event.targetScope.childHoge : ' + event.targetScope.childHoge);
    console.log('args : ' + args);
    // 自分も含めた子方向にイベント伝搬
    $scope.$broadcast('parentEvent', $scope.parentHoge);
  });
});

// myAppモジュールにChildCtrlコントローラーを登録
app.controller('ChildCtrl', function($scope) {
  $scope.childHoge = 'childのhogeです。';
  console.log('parentEventの監視を開始します。');
  $scope.$on('parentEvent', function(event, args) {
    // parentEvent発生時に実行される処理
    console.log(event.name + 'の発生が確認されました。');
    console.log(event);
    console.log('event.targetScope.parentHoge' + event.targetScope.parentHoge);
    console.log('args:' + args);
  });
  $scope.onclick = function(){
    // 自分も含めた親方向にイベント伝搬
    $scope.$emit('childEvent', $scope.childHoge);
  }
});

index.htmlの記述内容

例として以下の通り

<div ng-controller="ParentCtrl">
  親コントローラー
  <button ng-controller="ChildCtrl" ng-click="onclick();">
    子コントローラー
  </button>
</div>

このソースコードについて

ページが描画されたとき、
ParentCtrlの中の$onがイベント監視を開始する。
ChildCtrlの中の$onがイベント監視を開始する。

button要素をクリックすると、ChildCtrlのonclickメソッドが実行される。

onclickメソッドの中では、$scope.$emit('childEvent', $scope.childHoge);が実行されることで、親方向にchildEventが発生する。

ParentCtrlの$onがchildEventが発生したことを確認して、$scope.$broadcast('parentEvent', $scope.parentHoge);が実行され、子方向にParentEventが発生する。

ChildCtrlの$onがparentEventが発生したことを確認して、ひととおりの処理が終了。

$onの第二引数を渡してはいるけど、第一引数で渡しているeventだけでも、event.targetScope.childHogeみたいな感じで、イベント発生もとの$scopeと同じ値を取得できるみたいなので、上手い人たちはどのように書くのだろうかと思った。

今回はここまで。