How to implement passing of variable from one service method to another angular

Question

Hi to all angular guru,

My question is how to pass the return result of one service method to the other methods. Or to make it short I have an authentication method in my service, the return object result for this is a token. The token will be used to be append in my header for the rest of my http request which reside on the same service.

E.g

my Service js

authenticatePlayer: function(postData) {
    return $http({
      method  : 'POST',
      url     : api + 'auth/player',
      data    : postData,
      headers : {'Content-Type' : 'application/json'}
    })
    .then(function(result) {
      return result.data.token; //this is now the token
    }, function (result) {
      console.log(result);
    });
  }

within the Service js, I have other $http request such as:

        getPlayerByEmail: function(email_address) {
        return $http({
            method  : 'GET',
            url       : api + 'player/' + email_address,
            headers : {'X-token': token} 
           //token here is from the authenticatePlayer method but how to get it??
        })
        .then(function(result) {
            return result.data;
        });
    }

The two services methods are called in two controllers, my extended question is how to you pass the $scope from one controller to another that even when the page is refreshed the $scope value won't be destroy.

Hope it make sense.

As far as I know, your AngularJS model is destroyed when moving from one page to another. You would have to store the token in a cookie or other local storage if you want to retain it between pages. — Bernhard Hofmann
– Bernhard Hofmann, Commented Aug 22, 2013 at 9:15

BKM · Accepted Answer · 2013-08-22 07:28:39Z

4

One way to share $scope values between controllers is to create a service and inject it in any controller you want; An example service,

angular.module('myApp', [])
    .service('shareScope', function () {

        return {
            get: function () {
                return value;
            },
            set: function(data) {
                value = data;
            }
        };
    });

In your controller;

function Ctrl($scope, shareScope) {
    $scope.prop2 = shareScope.set('data');
    $scope.both = shareScope.get();
}

edited Aug 22, 2013 at 7:28

answered Aug 22, 2013 at 7:21

BKM

7,0797 gold badges32 silver badges47 bronze badges

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

3 Comments

JB Nizet Over a year ago

Why use a global window variable when the variable could be limited to the scope of the service?

Wondering Coder Over a year ago

but when the user refreshes the page the variable will be reset right/

BKM Over a year ago

In JavaScript if you refresh the page the variable scope will be lost. If you want the variable scope even after refreshing, you should use cookies, localStorage or sessionStorage.

JB Nizet · Accepted Answer · 2013-08-22 07:25:21Z

0

Store it in a variable:

angular.module('foo').factory('someService', function() {

    var token;

    return {
        authenticatePlayer: function(postData) {
            return $http({
                method  : 'POST',
                url     : api + 'auth/player',
                data    : postData,
                headers : {'Content-Type' : 'application/json'}
            })
            .then(function(result) {
                token = result.data.token; //this is now the token
            }, function (result) {
                console.log(result);
            });
        },
        getPlayerByEmail: function(email_address) {
            return $http({
                method  : 'GET',
                url       : api + 'player/' + email_address,
                headers : {'X-token': token} 
            })
            .then(function(result) {
                return result.data;
            });
        }
    };
});

edited Aug 22, 2013 at 7:25

answered Aug 22, 2013 at 7:19

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

2 Comments

Wondering Coder Over a year ago

the problem with the above solution is when the user refresh the page the variable reset. How to avoid that?

JB Nizet Over a year ago

Any JavaScript state, will always disappear if you refresh the page. If the state must be kept for several pages, you must store it in some persistent location: a cookie (see $cookieXxx in the angular doc), localStorage, on on the server.

Collectives™ on Stack Overflow

How to implement passing of variable from one service method to another angular

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related