AngularJSで$scopeをController間で共有する方法

こんにちは!ぐちです。

Controller間でのデータ共有

AngularJSでアプリを作っていると画面とダイアログなどControllerをまたいでデータを共有したいときがあると思います。
そういった時は以下のようにfactoryを定義してcontrollerで使えるように引き渡します。

angular.module('app')
    .factory('AppData', function() {
        return {
            hogehoge: function() {
                return  hogehoge;
            }
        };
    });
angular.module('app')
    .controller('HogeCtrl', function($scope, AppData) {

    });

$scopeを共有したい

上記の方法で$scopeを共有したい場合もあると思います。そんな時はデータと同じ考え方で下記のようにコントローラ名をキーに$scopeを管理して共有する方法があります。

angular.module('app')
    .factory('AppData', function() {
        var sharedScopes = {};

        return {
            setScope: function (key, value) {
                sharedScopes[key] = value;
            },
            getScope: function (key) {
                return sharedScopes[key];
            }
        };
    });

使い方

$scopeをセットする場合は下記のように使います。

AppData.setScope(‘HogeCtrl', $scope);

$scopeを取得する場合は下記のようにします。

var hogeCtrlScope = AppData.getScope(‘HogeCtrl');