How to set a value to a global variable inside a function in javascript/angular? [duplicate]

Question

This question already has answers here:

Global variables in AngularJS (12 answers)

AngularJs: How to access global variables outside of controller? [duplicate] (2 answers)

Closed 8 years ago.

Well, I need to use a variable in different angular controllers or any function, which I can do, but in this particular case I'm getting the value of one of those variables from a service or a function, how you want to call it, this is the code

//global variable userdata
userdata = {};

ng.tcts.service('$user', function($http, $q, $window, $boots){
return{

    login: function(data){
        var deferred = $q.defer();

        $http({
            method:'POST',
            url:ng.api+'/log/in',
            data:{
                    data:data
                },
            headers:{'Content-type':'application/x-www-form-urlencoded'}        
        }).success(function(response, status, headers, config){
            if(response.success){
                console.log(response);
                //userdata assignation
                userdata = response.data;  
                deferred.resolve([response.respnum, response.success, response.report, response.data]);
            }
            else{
                deferred.resolve([response.respnum, response.success, response.report, response.data]);
            }
        }).error(function(response, status, headers, config){
            deferred.reject([response.respnum, response.success, response.report]);
        });
        return deferred.promise;        
    }

);

As you can see I'm asigining userdata the value of response.data inside the success function , when I use it in the function environment it works , the assignation works fine, but when I try to use it outside of it, the object is empty, I hope you can help me with this, thx

Answer 1

all you need to do is make a service that gets and set the user data and the data is kept inside the service. Then you make a method that returns that data and you can inject it into any controller in your app.

app.service('userData',function(){
var data;

this.get = function() {
    // do your ajax call to get your user data and in the response data = response;
}

this.data = function() {
    return data;
}
});

then in any controller:

function myCtrl($scope,userData) {
    // you can access it with this userData.data();

    // or set it to a $scope var

    $scope.userData = userData.data();
}

Making a global variable isn't how you use Angular you can create a service that you then inject into your controllers so multiple places can talk to that data or you can set it to a $rootScope var and then reference it in any controller. NEVER create a global variable and reference it in your controller though. This is how you end up with memory leaks in Angular.

Answer 2

Not 100% clear on what your question is. If you are simply hoping to call this service from any controller and get the value of userdata, then just resolve your promise with the response.data.

So in your service:

deferred.resolve(response.data);

*or any other response items you need

And in the controller:

$user.login(payload).then(function(userData){
   console.log(userData);
});

If you want maintain this data after you have already made a request to the server, you could also just set somewhere in a variable (as @btm1 suggested) of a service, something like in the example below.

Example