Setting AngularJS global values for accessing and setting across controllers

Question

I have been experimenting with AngularJS values, and wish to store a global value for accessing and setting in different controllers.

So I have been trying out with the value approach like so:

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

app.value('globalValue', 0);

app.controller('myCtrl', ['$scope', '$rootScope', 'globalValue', function($scope, $rootScope, globalValue) {
    $scope.updateValue = function() {
        globalValue++;
    };    
}]);

app.controller('myCtrlB', ['$scope', '$rootScope', 'globalValue', function($scope, $rootScope, globalValue) {
        $scope.someValueB=globalValue;

}]);

Here's a fiddle

This is not working as I thought it might, so in my fiddle, when clicking the button to increment my 'global', the scope property in myCtrlB does not change.

I have clearly gone about this the wrong way, have I totally misunderstood how to use value()'s here?

Thanks

@user1518802 constant would work as well though it's a bit of a misnomer since the value doesn't remain constant over time. In functional terms it would work fine though since constant is also just a provider with less restrictions than .value docs.angularjs.org/guide/providers The problem is still the same though because of the value being assigned rather than a reference. — shaunhusain
– shaunhusain, Commented Apr 22, 2015 at 20:17

shaunhusain · Accepted Answer · 2015-04-22 20:11:40Z

2

This code should work basically you need an object so both controllers are pointing at the same object and some property of that object is changed. Otherwise you are assigning the initial value of globalValue to some local variable but it's not a reference.

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

app.value('globalValue', {counter:0});

app.controller('myCtrl', ['$scope', '$rootScope', 'globalValue', function($scope, $rootScope, globalValue) {
    $scope.updateValue = function() {
        globalValue.counter++;
    };    
}]);

app.controller('myCtrlB', ['$scope', '$rootScope', 'globalValue', function($scope, $rootScope, globalValue) {
        $scope.someValueB=globalValue;

}]);

Updated fiddle: http://jsfiddle.net/kfxy5hs1/3/

answered Apr 22, 2015 at 20:11

shaunhusain

19.7k4 gold badges41 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mindparse Over a year ago

Ok so how does $scope.someValueB in myCtrB resolve to globalValue.counter? I was expecting that line to read $scope.someValueB=globalValue.counter; What if there were multiple properties set in that globalValue object in the app.value() call?

shaunhusain Over a year ago

@mindparse in the view that uses myCtrlB I just updated the binding to point to the specific property of the object defined with the provider/value definition. Any time that you assign a string or a primitive (anything that's not an object) you are really making a copy of the value. In JS if you assign an object you are setting a new pointer to point to the same object, so when you change properties of that object both pointers are pointing at the same object.

mindparse Over a year ago

Doh I overlooked {{someValueB.counter}} in your version of the view! Makes sense now, thanks!

Collectives™ on Stack Overflow

Setting AngularJS global values for accessing and setting across controllers

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related