354

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

これはグローバル変数を宣言して初期化する正しい方法ではないと思いますが、実際にはグローバルではないので、私の質問は正しい方法は何ですか？現在のバージョンのangularで動作する良い例はありますか？

4

12 に答える 12

495

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

$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/

于 2012-08-13T16:54:18.647 に答える
98

Providers に関する Angular のドキュメントに従って、値を保存するだけの場合は、 Value レシピを使用する必要があります。

var myApp = angular.module('myApp', []);
myApp.value('clientId', 'a12345654321x');

次に、次のようにコントローラーで使用します。

myApp.controller('DemoController', ['clientId', function DemoController(clientId) {
    this.clientId = clientId;
}]);

Provider、Factory、または Service を使用して同じことを達成できます。これは、「プロバイダー レシピの上に構文糖衣を加えたものに過ぎない」ためですが、Value を使用すると、最小限の構文で目的を達成できます。

他のオプションは を使用する$rootScopeことですが、他の言語でグローバル変数を使用しないのと同じ理由で使用しないでください。控えめに使用することをお勧めします。

すべてのスコープは から継承されるため$rootScope、変数があり、それがすでに定義され$rootScope.dataていることを誰かが忘れて、ローカル スコープで作成すると、問題が発生します。data$scope.data

この値を変更し、すべてのコントローラーで永続化する場合は、オブジェクトを使用してプロパティを変更し、Javascript は「参照のコピー」によって渡されることに注意してください。

myApp.value('clientId', { value: 'a12345654321x' });
myApp.controller('DemoController', ['clientId', function DemoController(clientId) {
    this.clientId = clientId;
    this.change = function(value) {
        clientId.value = 'something else';
    }
}];

JSFiddle の例

于 2014-06-16T17:28:13.883 に答える
37

を使用した AngularJS の「グローバル変数」の例$rootScope:

コントローラー 1 はグローバル変数を設定します。

function MyCtrl1($scope, $rootScope) {
    $rootScope.name = 'anonymous'; 
}

コントローラー 2 はグローバル変数を読み取ります。

function MyCtrl2($scope, $rootScope) {
    $scope.name2 = $rootScope.name; 
}

ここに動作するjsFiddleがあります：http://jsfiddle.net/natefriedman/3XT3F/1/

于 2013-09-01T16:30:40.800 に答える
22 
// app.js or break it up into seperate files
// whatever structure is your flavor    
angular.module('myApp', [])    

.constant('CONFIG', {
    'APP_NAME' : 'My Awesome App',
    'APP_VERSION' : '0.0.0',
    'GOOGLE_ANALYTICS_ID' : '',
    'BASE_URL' : '',
    'SYSTEM_LANGUAGE' : ''
})

.controller('GlobalVarController', ['$scope', 'CONFIG', function($scope, CONFIG) {

    // If you wish to show the CONFIG vars in the console:
    console.log(CONFIG);

    // And your CONFIG vars in .constant will be passed to the HTML doc with this:
    $scope.config = CONFIG;
}]);

あなたのHTMLで：

<span ng-controller="GlobalVarController">{{config.APP_NAME}} | v{{config.APP_VERSION}}</span>
于 2015-08-28T22:17:24.877 に答える
8 
localStorage.username = 'blah'

最新のブラウザを使用していることが保証されている場合。ただし、値はすべて文字列に変換されることを知っています。

また、リロード間でキャッシュされるという便利な利点もあります。

于 2014-03-17T22:46:11.007 に答える
7

私が間違っている場合は訂正してください。しかし、Angular 2.0 がリリースされたとき、それが存在するとは思えません$rootScope。$scope私の推測は、それも削除されているという事実に基づいています。明らかに、コントローラーはまだ存在しますが、流行ではありませんng-controller。代わりに、コントローラーをディレクティブに挿入することを考えてください。リリースが間近に迫っているため、バージョン 1.X から 2.0 に簡単に切り替えたい場合は、サービスをグローバル変数として使用することをお勧めします。

于 2015-01-22T19:31:36.783 に答える
0

間違って別の方法を見つけました：

私がしたことは、var db = null上記のアプリ宣言を宣言し、それを変更してapp.jsからアクセスしたときにcontroller.js 、問題なくアクセスできました.この方法には、私が認識していない問題があるかもしれませんが、私が推測する良い解決策。

于 2017-06-12T10:21:47.050 に答える
-2

このようなこともできます..

function MyCtrl1($scope) {
    $rootScope.$root.name = 'anonymous'; 
}

function MyCtrl2($scope) {
    var name = $rootScope.$root.name;
}
于 2014-07-31T12:36:25.803 に答える