219

How do I use $rootScope to store variables in a controller I want to later access in another controller? For example:

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 });

How would I do this?

Improve this question
6
  • 1
    you should inject $rootScope in controller and use it as simple javascript Commented Sep 18, 2013 at 19:39
  • 30
    $rootScope is not the right way to do this. Making variables available across multiple controllers is pretty much what services are for. Commented Feb 19, 2014 at 15:07
  • 11
    @Steve: Angular's FAQ says "don't create a service whose only purpose in life is to store and return bits of data" This will put too much load on the $digest cycle.. Commented Apr 13, 2015 at 9:29
  • If I cannot inject controllers into services how do I send a variable from your said service to my other controller ? I see no way to get this working...appreciate your insight here.. Commented Jun 2, 2015 at 19:33
  • 2
    well, because its not injectable, you will need a syringe for that.. Commented Nov 10, 2016 at 11:22

8 Answers 8

Reset to default
251

Variables set at the root-scope are available to the controller scope via prototypical inheritance.

Here is a modified version of @Nitish's demo that shows the relationship a bit clearer: http://jsfiddle.net/TmPk5/6/

Notice that the rootScope's variable is set when the module initializes, and then each of the inherited scope's get their own copy which can be set independently (the change function). Also, the rootScope's value can be updated too (the changeRs function in 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; }; });
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Plus 1 for ... uh ... actually answering OP's question. (Although @MBielski and others are right).
If I do the $scope.test = 'Some value', will the $rootScope.test change as well?
@AllenLinatoc no, it wont they are two different objects although the scope of $rootScope is global (over all controllers) but $scope remains local to the controller. If you use $scope.test in two different controllers, know they are two different variable whether $rootScope.test would be the same variable in all controllers
I'm assuming you wouldn't want to use $rootScope often for the same reason you wouldn't use global variables in other languages?
How many number of rootscope variables we can create in an app?
161

Sharing data between controllers is what Factories/Services are very good for. In short, it works something like this.

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; }

You can see a working example in this fiddle: http://jsfiddle.net/mbielski/m8saa/

Improve this answer

15 Comments

+1 The $rootScope shouldn't be used to share variables when we have things like services and factories.
Well, Angular FAQ says this at the bottom of the page: "Conversely, don't create a service whose only purpose in life is to store and return bits of data." See: docs.angularjs.org/misc/faq
This is a simple example. I believe that they are saying not to have a service that appears in only one controller. I can't count how many places the staff that developed Angular have specifically said that services are the official way to pass data between controllers. Look around the mailing list, ask the various Angular luminaries, and see what you get. I might also note that your quote is at the bottom of the section entitled "$rootScope exists, but it can be used for evil." Passing data from one controller to another is evil.
But if you need to loop though your items in two different view/controller, you need to copy the data first in the controller to give it to the view? (I believe this is $rootScope solved)
Dear God No! What you are doing is exactly what services are for.
|
22 
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); });

DEMO

Improve this answer

4 Comments

So in Angular you don't usually use var?
its depends on condition. if want to show in html then u need to use otherwise u can use var
Oh scope is for DOM stuff?
This may be late but for any late comer, scope is a glue between view and controller per AJS documentation. scope does not directly references DOM. then what it does? here is more thorough docs docs.angularjs.org/guide/scope
9

i find no reason to do this $scope.value = $rootScope.test;

$scope is already prototype inheritance from $rootScope.

Please see this example

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

now you can bind this scope variable in anywhere in app tag.

Improve this answer

Comments

6

first store the values in $rootScope as

.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 is the parent of all $scope, each $scope receives a copy of $rootScope data which you can access using $scope itself.

Improve this answer

Comments

3

If it is just "access in other controller" then you can use angular constants for that, the benefit is; you can add some global settings or other things that you want to access throughout application

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

and then access it like:

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

(didn't test)

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

Improve this answer

Comments

2

http://astutejs.blogspot.in/2015/07/angularjs-what-is-rootscope.html

 app.controller('AppCtrl2', function ($scope, $rootScope) { $scope.msg = 'SCOPE'; $rootScope.name = 'ROOT SCOPE'; });
Improve this answer

Comments

1

There are multiple ways to achieve this one:-

1. Add $rootScope in .run method

.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. Create one service and access it in both the controllers.

.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); })
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.