[解決済み] AngularJSのグローバル変数

質問

あるコントローラで、スコープ上の変数を初期化する問題があります。その後、ユーザーがログインすると、別のコントローラでその変数が変更されます。この変数は、ナビゲーションバーなどの制御に使用され、ユーザーのタイプに応じてサイトの一部へのアクセスを制限するため、その値を保持することが重要です。問題は、この変数を初期化したコントローラが、何らかの方法でangularから再度呼び出され、変数を初期値に戻してしまうことです。

私はこれがグローバル変数の宣言と初期化の正しい方法ではないと仮定しています。

どのように解決するのですか？

グローバル変数には、基本的に2つのオプションがあります。

• を使う $rootScope http://docs.angularjs.org/api/ng.$rootScope
• サービスを利用する http://docs.angularjs.org/guide/services

$rootScope はすべてのスコープの親であり、そこで公開された値はすべてのテンプレートとコントローラで表示されます。このため $rootScope は、任意のコントローラにインジェクトするだけで、このスコープ内の値を変更できるので非常に簡単です。これは便利なのですが グローバル変数の問題 .

サービスはシングルトンであり、任意のコントローラにインジェクトして、その値をコントローラのスコープで公開することができます。サービスはシングルトンであるため、依然として「グローバル」ですが、それらを使用したり公開したりする場所をはるかにうまく制御することができます。

サービスの使い方は少し複雑ですが、それほどでもありません。以下はその例です。

var myApp = angular.module('myApp',[]);
myApp.factory('UserService', function() {
  return {
      name : 'anonymous'
  };
});

を作成し、コントローラの中で

function MyCtrl($scope, UserService) {
    $scope.name = UserService.name;
}

以下は、動作中のjsFiddleです。 http://jsfiddle.net/pkozlowski_opensource/BRWPM/2/