Modify a global value from a controller AngularJS

Question

i'm trying to modify a global value from a controller and use it, modified , on another one but the variable holds the old value.

app.js

var app = angular.module('PressRoom', []);
app.value('globals',
    {
        companyName: 'My company',
        appName: 'My app',
        user: {
            name: 'Test user',
            img: '',
            role: ''
        }
    });

Controller where i want to modify it

app.controller('LoginController', ['$scope','globals',function($scope,globals)
{
    $scope.globals = globals;
    globals.user.name = "Brand new user";
    // Redirect to dashboard.
}]);

Controller where i want to use it modified.

app.controller('DashboardController', ['$scope','globals',function($scope,globals,)
{
    $scope.globals = globals;
}]);

In the view of the last controller, i'm using the globals values on a directive, but it displays Test user instead of Brand new user

It seems you cannot override the provider value.. Check this out — Vinay
– Vinay, Commented May 12, 2016 at 11:24
You can't. But you can create a service that has a setter, getter ;) — dlock
– dlock, Commented May 12, 2016 at 11:31
But then i'll have to add the service to every controller that wants to use it? the directive that gets the user's name will be displayed on every page. — troyz
– troyz, Commented May 12, 2016 at 11:32

dlock · Accepted Answer · 2016-05-12 11:52:45Z

You can't. But you can create a Service that has a getter and a setter and use it the same way you would use a value. Needless to say, you can even take this to be a bit smarter and create a Service that you can use as a key,value store. For example, MyDataStore.set("myVal",1) and MyDataStore.get("myVal") But for the sake of simplicity, Here is a simple Service demonstrating my suggested approach.

angular.module("my", [])
  .service("MyValue", function() {
    return {
      set: function(val) {
        this.val = val;
      },
      get: function() {
        return this.val;
      }
    }
  })
  .run(function(MyValue) {
    MyValue.set("Initial Value");
  })
  .controller("MyController", function(MyValue) {
    console.log(MyValue.get()); //prints Initial Value
    MyValue.set("New Value");
    console.log(MyValue.get()); //prints New Value
  })

https://jsfiddle.net/oL0m2f7j/1/

Vinay · Accepted Answer · 2016-05-12 11:50:18Z

0

Use $rootScope variable and declare it inside of your factory/service (Not in controller)

So that you can use it through out your application and you can copy that value to local scope or override it if needed.

app.factory('MyFactory', MyFactory);

function MyFactory() {
    $rootScope.userName = '';
}
app.controller('MyController', MyController);

function MyController() {
    $scope.desiredName = $rootScope.userName;
    $scope.desiredName = 'Your desired value';
}

edited May 12, 2016 at 11:50

answered May 12, 2016 at 11:45

Vinay

5682 silver badges13 bronze badges

3 Comments

dlock Over a year ago

This works but it's not considered a good practice to share data between controllers using $rootScope. Service/Factory is the preferred way.

Vinay Over a year ago

@deadlock Yep.. can we use stateParams to catch data while state change..?

dlock Over a year ago

Yea, sure. State has nothing to do, If you use a service, it can be used accross all state controllers without being recreated over and over in each state change.

Collectives™ on Stack Overflow

Modify a global value from a controller AngularJS

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related