Données angulaires JS non peuplées à partir de requêtes HTTP asynchrones

Question

J'essaie d'obtenir un chargement div pour montrer lorsque mon module angulaire contacte le serveur.J'utilise des ressources angularjs 1.0.1 et angularjs 1.0.1 pour élargir la fonctionnalité du HTML et JQuery 1.7.2 pour une manipulation DOM additionnelle et un support AJAX.

J'ai déjà découvert que le chargement div ne montrera pas si j'exécute l'appel Ajax en Async False, sauf pour Firefox où il montre que GIF animé n'est pas animé.

Si j'exécute l'appel Ajax en ASYNC true, les données renvoyées ne sont pas chargées dans les variables de modèle angulaire du modèle chargé partielle.

est-il du tout possible d'obtenir un chargement animé diviser pour montrer et obtenir les données angulaires à charger dans le modèle?

Answer 1

J'espère que je vous comprends correctement.Vous souhaitez montrer une progression de chargement pour vos demandes AJAX.Pour ce faire, vous avez besoin d'un intercepteur de réponse.Voici un exemple de comment faire ce 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);
        });
    };

J'espère que cela aide

- DAN