查看視圖在angularjs中更改時的視圖

Question

有人知道如何在視圖更改時使角度激發成爲事件嗎？或者當請求並下載視圖時正確？我試圖爲頁面更改時添加加載動畫。

Answer 1

看看this thread它看起來像$httpProvider.responseInterceptors是一個很好的地方添加這種類型的東西。

This fiddle顯示了一個很好的示例，說明在哪裏添加代碼以啓動/停止a​​jax請求的微調器。 This fiddle是類似的，但實際上顯示並隱藏了「加載...」div。

如果你只是想顯示微調時的看法改變，你可以限制你的開始/停止代碼時content-type等於text/html類似於顯示了application/jsonthis post來。

注意：在我的測試中，當檢索我的.html文件時，spinnerFunction中的headersGetter()['Content-Type']被忽略，而在進行服務調用時它被填充。

Answer 2

我認爲一個更簡單，適應性更強的方法是使用AngularJS $http.pendingRequests.length調用。它返回掛起的ajax呼叫計數。所以當它達到0時，你的頁面已經完成加載。

您可以創建一個指令，在任何元素上插入加載div（scrim），然後等待所有ajax調用來解析並刪除您的微調器。

下面的代碼的肉，讓您的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"); 
      } 
     }); 

請注意，$。主動是未公開。