Datos de JS angular no poblados de solicitud HTTP asíncrona

Question

Estoy tratando de obtener una DIV de carga para mostrar cuando mi módulo angular se pone en contacto con el servidor.Estoy usando los recursos de AngularJS 1.0.1 y AngularJS 1.0.1 para ampliar la funcionalidad del HTML y JQUERY 1.7.2 para una manipulación adicional de DOM y el soporte AJAX.

Ya descubrí que el DIV de carga no mostrará si ejecuto la llamada AJAX en Async False, excepto Firefox donde se muestra, pero el GIF animado no está animado.

Si ejecuto la llamada AJAX en Async True, los datos devueltos no se cargan en las variables de modelo angular de la plantilla cargada parcial.

¿Es posible obtener un DIV de carga animada para mostrar y obtener los datos angulares para cargar en el modelo?

Answer 1

Esperemos que me esté entendiendo correctamente.Desea mostrar un progreso de carga para sus solicitudes de AJAX.Para hacer esto necesitas un interceptor de respuesta.Aquí hay un ejemplo de cómo hacer esto 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);
        });
    };

Espero que esto ayude

- DAN