[解決済み] ajaxリクエスト時にAngularjsのローディング画面が表示される。

質問

Angularjsを使用して、ajaxリクエストが完了するまでローディング画面（簡単なスピナー）を表示する必要があります。コードスニペットで何かアイデアを提案してください。

解決方法は？

データの読み込み状況を示すスコープ変数を設定する代わりに、ディレクティブがすべてを行うようにするのがよいでしょう。

angular.module('directive.loading', [])

    .directive('loading',   ['$http' ,function ($http)
    {
        return {
            restrict: 'A',
            link: function (scope, elm, attrs)
            {
                scope.isLoading = function () {
                    return $http.pendingRequests.length > 0;
                };

                scope.$watch(scope.isLoading, function (v)
                {
                    if(v){
                        elm.show();
                    }else{
                        elm.hide();
                    }
                });
            }
        };

    }]);

このディレクティブにより、すべてのローディングアニメーション要素に 'loading' 属性を与えるだけでよいのです。

<div class="loading-spiner-holder" data-loading ><div class="loading-spiner"><img src="..." /></div></div>

ページ上に複数のロードスピナーを置くことができます。どこでどのようにスピナーをレイアウトするかはあなた次第で、ディレクティブは単にあなたのためにそれを自動的にオン/オフします。