Śledzenie, kiedy widok zmienia się w angularjs

Question

Czy ktoś wie, jak wywołać pożegnanie kątowe podczas zmiany widoku? A może po wyświetleniu i pobraniu widoku? Próbuję dodać animacje ładowania w przypadku zmiany stron.

Answer 1

Spójrz na this thread wygląda na to, że $httpProvider.responseInterceptors to dobre miejsce do dodawania tego typu rzeczy.

This fiddle pokazuje dobry przykład miejsca, w którym można dodać kod do uruchamiania/zatrzymywania przędzenie dla żądań ajax. This fiddle jest podobny, ale faktycznie pokazuje i ukrywa element "Ładowanie ...".

Jeśli chcesz tylko pokazać spinner gdy poglądy zmienić można ograniczyć swój start/stop, aby kod gdy content-type równa text/html podobny do tego, co pokazuje this post z application/json.

Uwaga: w moich testach wygląda na to, że headersGetter()['Content-Type'] w pliku spinnerFunction jest pomijany podczas pobierania moich plików .html, podczas gdy jest on zapełniany podczas nawiązywania połączeń serwisowych.

Answer 2

Myślę, że znacznie prostsze i łatwiejsze do przystosowania byłoby użycie połączenia AngularJS $http.pendingRequests.length. Zwraca oczekującą liczbę wywołań ajax. Kiedy docierasz do 0, twoja strona ładuje się.

Można utworzyć dyrektywę, która wstawi element ładujący div (scrim) na dowolny element, a następnie czeka na wszystkie wywołania ajax, aby rozwiązać, a następnie usuwa spinner.

Oto mięso z kodem, aby dyrektywa twoi 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"); 
      } 
     }); 

Uwaga $ .active jest nieudokumentowane.