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?
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;
};
});
$scope.test = 'Some value', will the $rootScope.test change as well? –
Microdot $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 –
Damper 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/
$rootScope shouldn't be used to share variables when we have things like services and factories. –
Superadd $scope or controllerAs. For instance, if you're using UI Router, you can create a parent state and share data from it with all children states. Remember services are singletons and live throughout the entire life of the app, while controllers are reinstantiated each time they're used. A good case for sharing data via a service might be when several controllers need access to the same data; for instance, authService.getAccount(). –
Sudor authService.authenticate() method. Lastly I would say the "items" service here is pretty much the same thing as a Data Transfer Object, and those are often considered evil and a sign of code smell. If you're using a bunch of services just to store data, I'd re-think your architectural approach. –
Sudor $scope.add = items.add; but not passing any value to add function...why? –
Mcgary 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);
});
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.
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.
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/
http://astutejs.blogspot.in/2015/07/angularjs-what-is-rootscope.html
app.controller('AppCtrl2', function ($scope, $rootScope) {
$scope.msg = 'SCOPE';
$rootScope.name = 'ROOT SCOPE';
});
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);
})
© 2022 - 2024 — McMap. All rights reserved.