今さら人に聞けないmonacaのangularでのコントローラー間でパラメータを受け渡すには

monacaのangularでプログラムを組んでいると、コントローラーは1つではなく複数になる時が多々あります。

<ons-page ng-controller="MainPageController">
  <ons-button ng-click="notify()">Run</ons-button>
</ons-page>
<ons-dialog var="dialog" ng-controller="DialogController">
  <div style="text-align: center; padding: 10px;">
    <p>
      This is a dialog.
    </p>
    <p>
      <ons-button ng-click="hide()">Close</ons-button>
    </p>
  </div>
</ons-dialog>

<script>
var module = angular.module('mainApp', ['onsen']);

module.controller('MainPageController', function($scope) {
  $scope.notify = function(){
    dialog.show();
  };
});

module.controller('DialogController', function($scope) {
  $scope.hide = function(){
    dialog.hide()
  };
});
</script>

そこで複数のコントローラーがある場合にパラメータの受け渡しをしたくなる時があります。

まず、真っ先に思いつくのがグローバル変数を使う方法。

var HOGE = undefined;
var module = angular.module('mainApp', ['onsen']);

module.controller('MainPageController', function($scope) {
  $scope.notify = function(){
    dialog.show();
    HOGE = 'showed';
  };
});

module.controller('DialogController', function($scope) {
  $scope.hide = function(){
    dialog.hide()
    console.log(HOGE)
  };
});

ただしこれだとグローバル変数が汚染されてしまいあまりスマートとは言えません。

そこで、どうしたらグローバル変数を宣言せずに受け渡しができるのかなと探してみるとserviceメソッドを使えばいけそうなことがわかりました。

具体的には、下のような形になりました。

var module = angular.module('mainApp', ['onsen']);

module.service('hoge',function(){
  this.foo = undefined;
});

module.controller('MainPageController', ['$scope','hoge', function($scope,hoge) {
  $scope.notify = function(){
    hoge.foo = 'dialog showed';
    dialog.show();
  };
}]);

module.controller('DialogController', ['$scope','hoge', function($scope,hoge) {
  $scope.hide = function(){
    dialog.hide()
    console.log(hoge.foo)
  };
}]);

実行してみると確かに正常動作しました。

他にもやり方がありそうですが、少なくともグローバル変数を使うよりかはましなので、今後はこれを使って実装していきたいと思いました。