angularjs - angularjsでビューがいつ変更されたかを追跡して確認します

Question

ビューが変更されたときに角度のあるイベントを発生させる方法を知っている人はいますか? それとも、ビューがリクエストされてダウンロードされたときですか? ページが変更されたときの読み込みアニメーションを追加しようとしています。

Answer 1

このスレッドを見てください$httpProvider.responseInterceptors。この種のものを追加するのに適した場所のようです。

このフィドルは、ajax リクエストのスピナーを開始/停止するコードを追加する場所の良い例を示しています。このフィドルは似ていますが、実際には「読み込み中...」div を表示および非表示にします。

ビューが変更されたときにのみスピナーを表示したい場合はcontent-type、text/htmlこの投稿がapplication/json.

注: 私のテストでは、.html ファイルを取得するときに が省略されheadersGetter()['Content-Type']ているように見えますが、サービス呼び出しを行うときに入力されます。spinnerFunction

Answer 2

$http.pendingRequests.lengthAngularJS呼び出しを使用すると、はるかに単純で適応可能なアプローチになると思います。保留中の 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 は文書化されていないことに注意してください。