CODEWITHSUNDEEP
javascriptangularjs
Dennis
Dennis

Reputation: 4017

AngularJS promise not working

I have a promise that runs without a problem when it runs during application start, e.g.

myPromise
    .success( function(data) { $scope.myvariable = data })
    .error( function(msg, code) { console.log("msg: " + msg + "\nCode" + code) });

However if I try to run the promise dynamically, let's say when a button is clicked, (1) the promise executes successfully but none of my variables are updated.

running apply or digest only produces the following error: $digest already in progress

$scope.getContent = function() {
        myPromise
            .success( function(data) { 
                $scope.myVariable = data; //THIS WORKS 
                console.log(data); //THIS WORKS
            })
    }
    //Running the below code afterwards still produces a null value 
    console.log($scope.myVariable);

Upvotes: 2

Views: 1234

Answers (6)

AlainIb
AlainIb

Reputation: 4728

Maybe this can help : 

// a service providing data with async call
app.service('myService', function(elasticQuery) {
    this.getData = function (a,b,c) {
      // don't forget the 2 return 
      return elasticQuery.search({
         // make ajax call 
      }).then(function (response) {
         return response
      });
    };  
});


// in my controller 
// scope.getData is lunch with ng-click in the view
$scope.getData = function(a,b,c){
    myService.getData( a,b,c ).then(function (data) {
       $scope.myVariable  = data;          
    });
 };

Upvotes: 0

Omkara
Omkara

Reputation: 434

A. Call sequence will be as follows when DOM ready: 1. $scope.getContent will get initialized. 2. then execution : console.log($scope.myVariable);

B. Async call: 1. If success then below statement will get executed. $scope.myVariable = data; //THIS WORKS

Above point A and B are independent. Execution is asyc here. Hope this will help you understand. Enjoy.

Upvotes: 0

tpie
tpie

Reputation: 6221

The reason your console.log, which comes after your promise logs null is because it is executing before your promise returns. Even though the function using the promise has run, the success part of the code has not fired yet. The code hits the promise, makes the calls, creates the promise object, and moves on. When the promise returns, it fills in the empty promise object with the returned data. This is happening after your 

 console.log($scope.myVariable);

A good way maybe to handle it is to store the returned value in a variable. Inside the success set the variable to the returned data, then use a function like

$scope.myVariable = undefined;
$scope.getContent = function() {
    myPromise
        .success( function(data) { 
            $scope.myVariable = data; //THIS WORKS 
            console.log(data); //THIS WORKS
        })
}
function checker() {
    if($scope.myVariable) {
         console.log($scope.myVariable); 
    }
}

Then you can call that function as needed.

Depending on what you are doing and when your getContent function needs to run, you may want to use this with ui-router, and use resolve, which will run these functions before the page loads, thereby ensuring you have data to work with when the DOM loads. AngularJS UI-Router: preload $http data before app loads

Upvotes: 1

Satyam Koyani
Satyam Koyani

Reputation: 4274

Here your console.log($scope.myVariable); statement executes before success callback so here you need to do .then() chaining or apply watch on scope variable.

Upvotes: 1

squiroid
squiroid

Reputation: 14037

This is what we called as async world.

When you are waiting for the callback of your promise the statement console.log($scope.myVariable); already executed but still you don't have any value in it.

In that case you can use $watch if you want to get it value outside.

$scope.$watch('myVariable',funciton(newVal){
 console.log(newVal);
});

Little Detail:-

myPromise is invoked and waiting for the response in the meanwhile the statement console.log($scope.myVariable); after it executed which obviously doen't have any value for $scope.myVariable inside it (nobody gave it :-P). So when response came back it call the success or error method and initialize the value to your variable $scope.myVariable and print it.

Upvotes: 1

Sanjay B
Sanjay B

Reputation: 211

I think promise object makes call only once,when controller is initialized

you have to reinitialize controller,to get new updated values from server

Upvotes: 0

Related Questions