Seguir para ver cuándo una vista cambia en angularjs

Question

¿Alguien sabe cómo hacer que el disparo 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

Eche un vistazo a this thread Parece que el $httpProvider.responseInterceptors es un buen lugar para agregar este tipo de cosas.

This fiddle muestra un buen ejemplo de dónde agregar código para iniciar/detener un spinner para solicitudes ajax. This fiddle es similar pero en realidad muestra y oculta una div 'Cargando ...'.

Si sólo desea mostrar un spinner cuando las opiniones cambian puede limitar su arranque/parada código para cuando content-type es igual a text/html similar a lo que muestra con this postapplication/json.

Nota: en mis pruebas, parece que el headersGetter()['Content-Type'] en el spinnerFunction se omite al recuperar mis archivos .html, mientras que se rellena al realizar llamadas de servicio.

Answer 2

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

Puede 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 quita su spinner.

Aquí está la carne del código para hacer que sus AngularJS Directiva:

 // 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, $ .active es indocumentado.