今さら人に聞けない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) }; }]);
実行してみると確かに正常動作しました。
他にもやり方がありそうですが、少なくともグローバル変数を使うよりかはましなので、今後はこれを使って実装していきたいと思いました。