I am using AngularJS, I cannot make global variable change as needed

Question

I am messing around with a home project for the moment, and I am using angularJS with Ionic framework. I am very new to angularJS and I am having trouble declaring and updating a global variable to pass between controllers. I have the following global variable declared:

application.value("dataObject",
{
    Nor: 33,
    Sus: 33,
    Mal: 33
});

I then set dataObject.Nor to some other value in my one controller:

application.controller(
    "testingCtrl",
    function ($scope, $cordovaCamera, dataObject) {
        ...dataObject.Nor = 45;
        ...        
    }
);

Then I want to access this updated dataObject:

application.controller(
    "ResultsCtrl",
    function ($scope, dataObject) { 
        ... data: [dataObject.Nor,dataObject.Sus,dataObject.Mal],
        ...
    }
);

However, when I do this the dataObject has not updated and just shows me the default values. I do not know what I am doing wrong and would appreciate any help on the subject!

Possible duplicate of [Global variables in AngularJS](http://stackoverflow.com/questions/11938380/global-variables-in-angularjs) ... easiest solution is to use `$rootScope`, which you can inject into all controllers — Tim Biegeleisen, Sep 11 '16 at 15:19
Yes as already pointed out. Use either `rootscope` or `localstorage` if you want to pass variables between two controller. I'm not sure.. But, i think the object inside `value` cannot be modified. — Atul Sharma, Sep 11 '16 at 15:21
does changing pages create a problem. I use window.location.href = "results.html"; to redirect to a new page. — woofwoof, Sep 11 '16 at 16:28

score 0 · Answer 1 · edited May 23 '17 at 12:01

0

One option, perhaps the simplest, is to inject the $rootScope into the controller(s) which need to share your data object:

application.controller("testingCtrl", function ($scope, $rootScope, $cordovaCamera) {
    $rootScope.dataObject = {
        Nor: 33,
        Sus: 33,
        Mal: 33
    };
}

And then access $rootScope.dataObject simply by injecting $rootScope into any other controller which should have access.

Please refer here for more information.

edited May 23 '17 at 12:01

Community

1
1

answered Sep 11 '16 at 15:25

Tim Biegeleisen

502,043
27
286
360

Thank you I tried this suggestion ad it did not work in my case, so I am making a mistake somewhere in my code. Thank you for replying! – woofwoof Sep 11 '16 at 16:05

score 0 · Accepted Answer · answered Sep 11 '16 at 15:53

I recommend against $rootScope or value. I think these are anti-patterns and $rootScope will go away in Angular 2.

Try a service.

application.service('ConfigService', function() {
  var _config = {};

  this.updateConfig = function(c) {
    angular.copy(c, _config);
  }

  this.getConfig = function() {
    return _config;
  }
})

application.controller(
    "testingCtrl",
    function ($cordovaCamera, ConfigService) {
        ConfigService.updateConfig({Nor: 45});
    }
);

application.controller(
    "ResultsCtrl",
    function ($scope, ConfigService) { 
      var dataObject = ConfigService.getConfig();
      var data = [dataObject.Nor,dataObject.Sus,dataObject.Mal],
    }
);

Keep in mind that when the first index of data (dataObject.Nor) will not update with another call to updateConfig. The reason being you are passing a simple datatype where the reference is lost.

Very nice comment. It does not work in my particular instance though, — woofwoof, Sep 11 '16 at 16:04

I am using AngularJS, I cannot make global variable change as needed

2 Answers2