AngularJSでController間の通信を行う

AngularJSでController間の通信を行うには２つの方法がある。

１つは$rootScopeに値を設定してしまう方法。

もう一つは$broadcast,$onを使う方法。

$rootScopeはグローバルなオブジェクトであるので、アプリ内のどこからでも参照できる。ここに値を設定すると、各Controllerで値を参照することができる。

しかし、これはグローバル変数を使ったプログラムの弊害で、メンテナンス性が悪くなるのでお勧めはできない。簡単に使えるのでつい使用してしまうが、後で困るのは自分なので使わなようにしたい。

そこでAngularJSでは$broadcast,$onメソッドが用意されている。これを使ってpub-subパターンが実現できる。

angular.module('myApp.controllers', []).
 controller('mainCtrl', ['$rootScope', '$scope', function($rootScope, $scope) {

  var date = {"id": 1, "text": "メッセージです"}
  $rootScope.$broadcast('messageBroadcast',data);

 }]).
 controller('subCtrl', ['$scope', function($scope) {

  $scope.$on('messageBroadcast', function(event,data) {

   $scope.message = data;

  });


 }]);

mainCtrlからイベントを発生させ、subCtrlでイベントを受け取とる。
簡単で有効なパターンなのでぜひマスターしておけばいいと思う。