How to save a promise object as a $scope variable in Angular JS

Question

Constants.getContants is a promise which will get all the constants that are used in my application. I would like to save this to a $scope variable so that I can access it anywhere in the controller or application. Now, whenever I need to access it, I need to repeat the call and do the operation there itself. Even If I try to save it in the $scope it will not be available outside the corresponding handler. How to solve this issue.

Following is the code that I'm using:

Constants.getConstants().then(function (AppContants) {
           $scope.responseCount = AppContants.data.serverUrl+AppContants.data.appId
       console.log($scope.responseCount);
           //$scope.$apply();
   });

console.log($scope.responseCount);

Here AJAX call is going out of sync also. I know that actions need to performed inside the handler function so that we can be sure that the intended action is executed only after a successful AJAX call. I need to use these variables outside the function. I tried $scope.$apply() operation as well. It didn't help. Is there a way to solve this? Thanks in advance.

Are you sure your service is returning what you're expecting it to return? Does `AppContants` inside the `then` callback is bringing the data you expect? — Osman Cea, Mar 21 '17 at 09:40
Hi @AnandMP , could you please brief the scenario you are trying to achieve, which will give me a better understanding — Pramod_Para, Mar 21 '17 at 09:51

score 0 · Answer 1 · answered Mar 21 '17 at 09:38

Constants.getConstants().then(function(response) 
{
     $scope.responseCount = response.data;
}, function(error) 
{
console.log(error);

});

And in your service you should have something like

 this.getConstants= function($username){
      var endpoint = "url";
      return $http({
        method: 'get',
        url:  endpoint
      });
    };

score 0 · Answer 2 · answered Mar 21 '17 at 09:44

In your case the 2nd Console.Log executes just after placing the AJAX call. It does not wait for the AJAX to respond as it is a asynchronous call.

You can only be able to use '$scope.responseCount' property after the AJAX cal is resolved.

As a workaround you can:

Place this call to fetch constants at the time of application startup and save the constants in some service (shared service).
Do your operation in the 'then' block of this AJAX call.

score 0 · Answer 3 · answered Mar 21 '17 at 09:56

0

Here's the thing. When you are Constants.getConstants() it return response as promise. since javascript asynchronous it does not wait until response return. It just keep on executing. That's why the console outside the then function display undefined.

workaround is you can add a function inside promise and put you operations inside that function

Constants.getConstants().then(function(AppContants) {
    $scope.responseCount = AppContants.data.serverUrl + AppContants.data.appId
    console.log($scope.responseCount);
    sampleFunc() 
});

function sampleFunc() {
    // do your oprations here 
    console.log($scope.responseCount);
}

answered Mar 21 '17 at 09:56

Sachila Ranawaka

39,756
7
56
80

Yes, this is the way I'm running my application now. I'd like to know if there is a way to make it available throughout the application? Like saving it to the $rootScope or something like that? – Anand MP Mar 21 '17 at 10:09
1

does not matter if you use rooscope or scope. it take time to assign value to variable. once `$scope.responseCount` assign inside the `then` function you can access `$scope.responseCount` trough out the controller. use rootscope if you want to access it from different controllers but my recommendation is use a service for that. – Sachila Ranawaka Mar 21 '17 at 10:13

score 0 · Answer 4 · answered Mar 21 '17 at 11:51

You can cache the promise in a service:

app.service("ConstantCache", function(Constants) {
    var promiseCache;
    this.getPromise = function() {
        if ( promiseCache } {
            return promiseCache;
        } else {
            promiseCache = Constants.getConstants();
            return promiseCache;
        };
    };
    this.trashCache = function() {
        promiseCache = null;
    };
});

Then the cached promise can be used in any controller as many times as desired:

ConstantCache.getPromise().then(function(AppContants) {
    $scope.responseCount = AppContants.data.serverUrl + AppContants.data.appId
    console.log($scope.responseCount);
    sampleFunc() 
});

How to save a promise object as a $scope variable in Angular JS

4 Answers4