anglejsでビューが変更されたときを確認するトラック

Question

ビューが変更されたときに角射撃を行う方法を知っている人はいますか？または、ビューが要求され、ダウンロードされたときには正しいでしょうか？私は、ページが変更されたときの読み込みアニメーションを追加しようとしています。

Answer 1

this threadを見てみると、$httpProvider.responseInterceptorsのようなものがこのタイプのものを追加するのに適しています。

This fiddleは、ajaxリクエストのスピナーを開始/停止するコードを追加する場所の良い例を示しています。 This fiddleは似ていますが、実際には[Loading ...] divを表示して非表示にします。

あなただけのビューがcontent-typeがthis postがapplication/jsonで示したものと同様のtext/htmlに等しいときあなたがあなたのスタート/ストップコードを制限することができます変更したときにスピナーを表示したい場合。

注：私のテストでは、spinnerFunctionのheadersGetter()['Content-Type']は、.htmlファイルを取得するときに省略されていますが、サービスコールを行うときには埋め込まれています。

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"); 
      } 
     }); 

$ .activeが文書化されていないで、注意してください。