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?

Answer 1

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