angularjs - escape - ng-if

Seguir para ver cuando una vista cambia en angularjs

Question

¿Alguien sabe cómo hacer que el fuego angular sea un evento cuando la vista ha cambiado? ¿O justo cuando se solicita y descarga una vista? Intento agregar animaciones de carga para cuando cambien las páginas.

Answer 1

Creo que un enfoque mucho más simple y adaptable sería usar la llamada AngularJS $http.pendingRequests.length . Devuelve el conteo de llamadas ajax pendientes. Entonces, cuando llega a 0 , la página está lista para cargarse.

Podría crear una directiva que inserta un div de carga (scrim) en cualquier elemento y luego espera a que todas las llamadas ajax se resuelvan y luego elimina su spinner.

Aquí está la carne del código para hacer su directiva AngularJS:

        // Prepend the loading div to the dom element that this directive is applied.
        var scrim = $(''<div id="loading"></div>'');
        $(scrim).prependTo(domElement);

        /**
         * returns the number of active ajax requests (angular + jquery)
         * $.active returns the count of jQuery specific unresolved ajax calls. It becomes 0 if
         * there are no calls to be made or when calls become finished.
         * @return number of active requests.
         */
        function totalActiveAjaxRequests() {
            return ($http.pendingRequests.length + $.active);
        }

        /**
         * Check for completion of pending Ajax requests. When they''re done,
         * remove the loading screen and show the page data.
         */
        scope.$watch(totalActiveAjaxRequests, function whenActiveAjaxRequestsChange() {
            if(totalActiveAjaxRequests() === 0){
                $log.log("done loading ajax requests");
                $(scrim).remove();
                $(domElement).css("position", "inherit");
            }
        });

Tenga en cuenta que $ .active no está documentado.

Answer 2

Echa un vistazo a este hilo , parece que los $httpProvider.responseInterceptors son un buen lugar para agregar este tipo de cosas.

Este violín muestra un buen ejemplo de dónde agregar código para iniciar / detener un spinner para solicitudes ajax. Este violín es similar, pero en realidad muestra y oculta un div ''Cargando ...''.

Si solo desea mostrar un spinner cuando cambian las vistas, puede limitar su código de inicio / detención a cuando content-type equivale a text/html similar a lo que muestra esta publicación con application/json .

Nota: en mis pruebas, parece que los headersGetter()[''Content-Type''] en la función spinnerFunction se omiten al recuperar mis archivos .html, mientras que se completan al realizar llamadas de servicio.