AngularJS get return value from AJAX that is outside controller

Question

Ok, so I have a service with a function that does an HTTP request and the value returned is set to $scope, however this does not work because it seems $scope is not waiting for the AJAX call. How would I go about returning an AJAX result from a service function outside the controller?

Example:

//Controller
app.controller('Controller', function($scope, $http, Service){

    // $scope WILL NOT BE SET TO THE VALUE RETURNED, the returned value is UNDEFINED
    $scope = Service.getData();

}


// Get server data from service function
app.service('Service', function ($http){

    this.getData = function(){
        //Get server data

       return { data: result }
    }
}

try http://stackoverflow.com/questions/15161537/angularjs-load-data-from-service — Arun P Johny, Jun 27 '14 at 03:30
@ArunPJohny Nothing is explained about waiting for the server response in that article, but thank you. — user3704920, Jun 27 '14 at 03:36

score 0 · Answer 1 · answered Jun 27 '14 at 03:43

0

Try putting the service call in the resolve function and inject the result into your controller.

This blog post has a great example: http://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx

answered Jun 27 '14 at 03:43

link

2,480
1
16
18

score 0 · Answer 2 · answered Jun 27 '14 at 03:47

You can not wait for ajax call. That's why "A" in AJAx stands for asynchronous. You can try syncrhonous call(which should be avoided) or try callback function to set your scope.

For example,

//service
this.getData=function(callback){
callback({data:result});
}

//controller
Service.getData(function(response){
$scope = response;
})

score 0 · Answer 3 · answered Jun 27 '14 at 03:51

You will need to run a callback function once the Ajax call has finished. So it would look something like this.

//Controller
app.controller('Controller', function($scope, $http, Service){

   // $scope WILL NOT BE SET TO THE VALUE RETURNED, the returned value is UNDEFINED
   Service.getData(function(data) {
      $scope = data;
   });

}


// Get server data from service function
app.service('Service', function ($http){

   this.getData = function(callback){
       //Get server data
      callback({data: result});
   }
}

AngularJS get return value from AJAX that is outside controller

3 Answers3