目次
≪前の記事 8. カスタムディレクティブ

$scopeはコントローラごとに生成されるオブジェクトで、互いに隔離されています。したがって、他のコントローラの$scopeオブジェクトにアクセスすることはできません。

スコープは親子階層になっており、全てのスコープの親にあたるルートスコープ＝ $rootScopeが存在しています。$rootScopeはどこからでもアクセス可能ですので、複数のコントローラで共通で扱いたいデータは、$rootScopeにセットすると便利です。

$rootScopeを扱うコントローラ

コントローラで $rootScope を扱う場合は、依存サービスとして$rootScopeを指定する必要があります。

$rootScopeを扱うコントローラ

//                     依存サービスに$rootScopeを指定↓
module.controller("sampleA", function($scope, $rootScope, $timeout){
    // ....
});

このように、module.controller()メソッドの第2引数のファクトリー関数に、$rootScopeサービスを指定します。

テンプレート内での$rootScope

$rootScopeのプロパティは、テンプレート内では$scopeと全く同じに扱えます。

$rootScope.hoge の値を出力 .... {{hoge}}
$rootScope.foo.bar の値を出力 .... {{foo.bar}}

サンプルコード

以下のサンプルは、2つのコントローラの $scope に同じプロパティをセットし互いに隔離されていることを確認、また、$rootScopeのプロパティは双方のコントローラからアクセスできることを確認するコードです。

sample09.html

<!DOCTYPE html>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.4.5/jquery.datetimepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.4.5/jquery.datetimepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
/**
 * アプリケーション モジュール オブジェクトの定義
 */
SampleModule = (function() {
    var module = angular.module("sampleModule", []);
    
    return module;
})();

/**
 * コントローラの定義
 */
(function(module) {
    /**
     * SampleA Controller
     */
    module.controller("sampleA", function($scope, $rootScope, $timeout){
        $timeout(function(){
            $scope.child      = "Child scope of sampleA";
            $rootScope.parent = "Parent scope";
        });
    });
    /**
     * SampleB Controller
     */
    module.controller("sampleB", function($scope, $rootScope, $timeout){
        $timeout(function(){
            $scope.child = "Child scope of sampleB";
        });
    });
})(SampleModule);
</script>

<!-- sampleModule テンプレート -->
<div ng-app="sampleModule">
    <!-- sampleA テンプレート -->
    <div ng-controller="sampleA" ng-cloak>
        <h2>SampleA Controller</h2>
        <dl>
            <dt>$scope.child</dt>
            <dd>{{child}}</dd>
            <dt>$rootScope.parent</dt>
            <dd>{{parent}}</dd>
        </dl>
    </div>
    <!-- sampleB テンプレート -->
    <div ng-controller="sampleB" ng-cloak>
        <h2>SampleB Controller</h2>
        <dl>
            <dt>$scope.child</dt>
            <dd>{{child}}</dd>
            <dt>$rootScope.parent</dt>
            <dd>{{parent}}</dd>
        </dl>
    </div>
</div>

目次
≪前の記事 8. カスタムディレクティブ