Angularで$ rootScopeを使用して変数を格納するにはどうすればよいですか?


217

$rootScope後で別のコントローラーにアクセスしたいコントローラーに変数を格納するにはどうすればよいですか?例えば:

angular.module('myApp').controller('myCtrl', function($scope) {
  var a = //something in the scope
  //put it in the root scope
});

angular.module('myApp').controller('myCtrl2', function($scope) {
  var b = //get var a from root scope somehow
  //use var b
});

どうすればいいですか?


1
$ rootScopeをコントローラーに挿入し、単純なJavaScriptとして使用する必要があります
Ajay Beniwal

30
$ rootScopeはこれを行う正しい方法ではありません。複数のコントローラーで変数を使用できるようにすることは、サービスの目的とほぼ同じです。
スティーブ

11
@Steve:角度のFAQはこれが$ダイジェストサイクルにあまり負荷をかけます「その唯一の目的は生活の中でデータの保存と復帰ビットにあるサービスを作成していない」と言う...
Marwen Trabelsi

コントローラをサービスに挿入できない場合、指定したサービスから他のコントローラに変数を送信するにはどうすればよいですか?これを機能させる方法はありません...ここであなたの洞察を認めてください
着陸

2
まあ、その注射用ではないので、あなたは...そのための注射器が必要になります
Xsmael

回答:


248

ルートスコープで設定された変数は、プロトタイプ継承を介してコントローラースコープで使用できます。

これは、@ Nitishのデモの修正バージョンで、関係が少し明確になっています。http: //jsfiddle.net/TmPk5/6/

モジュールの初期化時にrootScopeの変数が設定され、継承されたスコープのそれぞれが独自に設定できる独自のコピー(change関数)を取得することに注意してください。また、rootScopeの値も更新できます(のchangeRs関数myCtrl2

angular.module('myApp', [])
.run(function($rootScope) {
    $rootScope.test = new Date();
})
.controller('myCtrl', function($scope, $rootScope) {
  $scope.change = function() {
        $scope.test = new Date();
    };

    $scope.getOrig = function() {
        return $rootScope.test;
    };
})
.controller('myCtrl2', function($scope, $rootScope) {
    $scope.change = function() {
        $scope.test = new Date();
    };

    $scope.changeRs = function() {
        $rootScope.test = new Date();
    };

    $scope.getOrig = function() {
        return $rootScope.test;
    };
});

7
プラス1 ...ええと...実際にOPの質問に答えます。(@MBielskiや他の人は正しいですが)。
2015

を実行する$scope.test = 'Some value'と、$rootScope.test変更も行われますか?
Allen Linatoc 16

@AllenLinatocいいえ、スコープ$rootScope は(すべてのコントローラー上で)グローバルですが$scope、コントローラーに対してローカルのままですが、2つの異なるオブジェクトではありません。$scope.test2つの異なるコントローラーで使用する場合 $rootScope.test 、すべてのコントローラーで同じ変数になるかどうかにかかわらず、2つの異なる変数であることを確認してください
Xsmael

他の言語でグローバル変数を使用しないのと同じ理由で、$ rootScopeを頻繁に使用したくないと思いますか?
Zypps987 2017

アプリで作成できるルートスコープ変数の数はいくつですか?
ジェイ

161

コントローラ間でデータを共有することは、ファクトリ/サービスが非常に適していることです。要するに、それはこのように機能します。

var app = angular.module('myApp', []);

app.factory('items', function() {
    var items = [];
    var itemsService = {};

    itemsService.add = function(item) {
        items.push(item);
    };
    itemsService.list = function() {
        return items;
    };

    return itemsService;
});

function Ctrl1($scope,items) {
    $scope.list = items.list; 
}

function Ctrl2($scope, items) {
    $scope.add = items.add;
}

このフィドルで実際の例を見ることができます:http : //jsfiddle.net/mbielski/m8saa/


49
+1 $rootScopeサービスやファクトリーなどがある場合、変数を共有するために使用すべきではありません。
jjperezaguinaga

74
まあ、Angular FAQはページの下部でこれを言っています:「逆に、人生の唯一の目的がデータのビットを格納して返すことであるサービスを作成しないでください。」参照:docs.angularjs.org/misc/faq
Oytun

11
これは簡単な例です。1つのコントローラーだけに表示されるサービスを持たないように言っていると思います。Angularを開発したスタッフがコントローラー間でデータをやり取りするための公式の方法はサービスであると具体的に述べている場所の数は数えられません。メーリングリストを見て回り、さまざまなAngularの著名人に質問して、何が得られるかを確認してください。また、あなたの引用が「$ rootScopeは存在しますが、悪に使用される可能性があります」というタイトルのセクションの下部にあることに注意してください。あるコントローラーから別のコントローラーにデータを渡すのは悪いことです。
MBielski 2014年

1
しかし、2つの異なるビュー/コントローラーでアイテムをループする必要がある場合は、最初にコントローラーでデータをコピーしてビューに渡す必要がありますか?(これは$ rootScopeで解決されたと思います)
Thomas Decaux

1
サービスを使用するか、rootScopeクイックフィックスを使用するかを判断するのは開発者次第です。グローバルスコープは機能であり便利なものもあります。Angularのドキュメントではそういうことを考えています。プログラミングで芸術を維持し、完全にMVC何とか何とかしてロボットになることはできません。1つのコントローラーが変更について知る必要がある場合は、上記のサービスと$ watch変数を使用できますが、ここでは実際にはコントローラー間の通信ではありません。
着陸

21
angular.module('myApp').controller('myCtrl', function($scope, $rootScope) {
   var a = //something in the scope
   //put it in the root scope
    $rootScope.test = "TEST";
 });

angular.module('myApp').controller('myCtrl2', function($scope, $rootScope) {
   var b = //get var a from root scope somehow
   //use var b

   $scope.value = $rootScope.test;
   alert($scope.value);

 //    var b = $rootScope.test;
 //  alert(b);
 });

デモ


Angularでは通常varを使用しませんか?
トリシス

1
状態により異なります。HTMLで表示したい場合は、使用する必要があります。それ以外の場合は、varを使用できます
Nitish Kumar '18

ああスコープはDOMのものですか?
トリシス

1
これは遅いかもしれませんが、遅い方の場合、スコープはAJSドキュメントによるビューとコントローラー間の接着剤です。スコープはDOMを直接参照しません。その後、それは何をしますか?ここにもっと徹底的なドキュメントがあります docs.angularjs.org/guide/scope
yantaq

9

これを行う理由は見つかりません$ scope.value = $ rootScope.test;

$ scopeはすでに$ rootScopeからのプロトタイプ継承です。

この例をご覧ください

var app = angular.module('app',[]).run(function($rootScope){
$rootScope.userName = "Rezaul Hasan";
});

これで、このスコープ変数をappタグのどこにでもバインドできます。


6

最初に値を$ rootScopeに保存します

.run(function($rootScope){
$rootScope.myData = {name : "nikhil"}
})

.controller('myCtrl', function($scope) {
var a ="Nikhilesh";
$scope.myData.name = a;
});

.controller('myCtrl2', function($scope) {
var b = $scope.myData.name;
)}

$ rootScopeはすべての$ scopeの親であり、各$ scopeは$ scopeを使用してアクセスできる$ rootScopeデータのコピーを受け取ります。


3

それが「他のコントローラーでのアクセス」だけの場合は、そのために角度定数を使用できます。アプリケーション全体でアクセスしたいグローバル設定やその他のものを追加できます

app.constant(‘appGlobals’, {
    defaultTemplatePath: '/assets/html/template/',
    appName: 'My Awesome App'
});

次のようにアクセスします:

app.controller(‘SomeController’, [‘appGlobals’, function SomeController(config) {
    console.log(appGlobals);
    console.log(‘default path’, appGlobals.defaultTemplatePath);
}]);

(テストしませんでした)

詳細:http : //ilikekillnerds.com/2014/11/constants-values-global-variables-in-angularjs-the-right-way/



1

これを達成するには複数の方法があります:-

1.追加$rootScope.run方法

.run(function ($rootScope) {
    $rootScope.name = "Peter";
});

// Controller
.controller('myController', function ($scope,$rootScope) {
    console.log("Name in rootscope ",$rootScope.name);
    OR
    console.log("Name in scope ",$scope.name);
});

2. 1つのサービスを作成し、両方のコントローラーでそれにアクセスします。

.factory('myFactory', function () {
     var object = {};

     object.users = ['John', 'James', 'Jake']; 

     return object;
})
// Controller A

.controller('ControllerA', function (myFactory) {
    console.log("In controller A ", myFactory);
})

// Controller B

.controller('ControllerB', function (myFactory) {
    console.log("In controller B ", myFactory);
})
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.