Angular JS data not populated from asynchronous http request

Question

I am trying to get a loading div to show when my angular module is contacting the server. I am using AngularJS 1.0.1 and AngularJS Resources 1.0.1 to expand the functionality of the HTML and jquery 1.7.2 for some additional dom manipulation and ajax support.

I already found out that the loading div will not show if I run the ajax call in async false, except for Firefox where it shows but animated gif is not animated.

If I run the ajax call in async true, the data returned back does not get loaded into the angular model variables of the loaded template partial.

Is it at all possible to get an animated loading div to show and get the angular data to load into the model?

Dan Doyon · Accepted Answer · 2012-11-22 06:04:59Z

12

Hopefully I'm understanding you correctly. You want to show a loading progress for your ajax requests. To do this you need a response interceptor. Here is a an example of how to do this http://jsfiddle.net/zdam/dBR2r/

// register the interceptor as a service, intercepts ALL angular ajax http calls
.factory('myHttpInterceptor', function ($q, $window, $rootScope) {
    return function (promise) {
        $rootScope.nowloading = true; // use ng-show="nowloading" on element containing spinner
        return promise.then(function (response) {
            // do something on success
            $rootScope.nowloading = false; // need to turn it off on success 
            return response;

        }, function (response) {
            // do something on error
            $rootScope.nowloading = false;  // need to turn it off on failure
            $rootScope.network_error = true;   // you might want to show an error icon.
            return $q.reject(response);
        });
    };

hope this helps

--dan

edited Nov 22, 2012 at 6:04

answered Jul 26, 2012 at 21:00

Dan Doyon

6,7302 gold badges33 silver badges40 bronze badges

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

2 Comments

Brandon B Over a year ago

Hello Dan, I went to your jsfiddle, added jquery to the list of scripts , added the loading div block at the top of the html, and replaced your alerts with $('#loading').show(); and $('#loading').hide(); where appropriate. It works link. Thanks! Unfortunately, I discovered my own work around earlier. Since the $http resource is a promise, it is not necessary to interrupt it. For the situation I had only needed to call .show() before running the $http call and then added .hide(); in the error and success callback functions. Sorry for making you do all that work.

Dan Doyon Over a year ago

Brandon, one of the benes of an interceptor is that it will work for all ajaxy calls. I've done a couple of apps using this technique.

Collectives™ on Stack Overflow

Angular JS data not populated from asynchronous http request

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related