40

SO で http/resource 呼び出しの読み込みスピナーの例を見つけました。

ご覧のとおり、実装は機能しています (AngularJS 1.0.5 を使用)。ただし、ソースを AngularJS 1.1.5 に変更すると、. この例はもう機能しません。

$httpProvider.responseInterceptors1.1.5 で非推奨になっていることを知りました。代わりに使用する必要があります$httpProvider.interceptors

残念ながら、上記の文字列を Plunker で置き換えるだけでは問題は解決しませんでした。AngularJS 1.1.5 で HttpInterceptor を使用してそのような読み込みスピナーを実行した人はいますか?

ご協力いただきありがとうございます！

マイケル

4

3 に答える 3

112

Steve のヒントのおかげで、ローダーを実装することができました。

インターセプター:

.factory('httpInterceptor', function ($q, $rootScope, $log) {

    var numLoadings = 0;

    return {
        request: function (config) {

            numLoadings++;

            // Show loader
            $rootScope.$broadcast("loader_show");
            return config || $q.when(config)

        },
        response: function (response) {

            if ((--numLoadings) === 0) {
                // Hide loader
                $rootScope.$broadcast("loader_hide");
            }

            return response || $q.when(response);

        },
        responseError: function (response) {

            if (!(--numLoadings)) {
                // Hide loader
                $rootScope.$broadcast("loader_hide");
            }

            return $q.reject(response);
        }
    };
})
.config(function ($httpProvider) {
    $httpProvider.interceptors.push('httpInterceptor');
});

指令：

.directive("loader", function ($rootScope) {
    return function ($scope, element, attrs) {
        $scope.$on("loader_show", function () {
            return element.show();
        });
        return $scope.$on("loader_hide", function () {
            return element.hide();
        });
    };
}
)

CSS:

#loaderDiv {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1100;
   background-color: white;
   opacity: .6;
}

.ajax-loader {
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -32px; /* -1 * image width / 2 */
   margin-top: -32px; /* -1 * image height / 2 */
   display: block;
}

HTML:

<div id="loaderDiv" loader>
    <img src="src/assets/img/ajax_loader.gif" class="ajax-loader"/>
</div>
于 2013-07-25T06:45:02.713 に答える
2

ソリューションに JQuery を含めたい場合は、提供/承認されたソリューションで問題ありません。AngularJS チームはこれを推奨していません。element.show/.hide は Angular の JQLite ではサポートされていません....そのため、jquery 以外のセッションで実行するには、次のリファクタリングが必要です。

HTML 要素を変更して、「非表示」のクラスを追加します

<div id="loaderDiv" loader class="hidden">
     <img src="Content/images/yourgif.gif" class="ajax-loader" />
</div>

css に隠しクラスを追加します。

.hidden{display:none !important}

そして、ディレクティブを次のように微調整します。

(function() {
    'use strict';

    angular
        .module('your_app')
        .directive('yourSpinner', yourSpinner);

    yourSpinner.$inject = ['$rootScope'];

    function yourSpinner($rootScope) {
       return function($scope, element, attrs) {
           $scope.$on("loader_show", function () {
               if (element.hasClass("hidden")) {
                   element.removeClass("hidden")
               }
            });
            return $scope.$on("loader_hide", function () {
                if(!element.hasClass("hidden")){
                    element.addClass("hidden")
                }
            });
        }
    }

})();

工場はそのままで大丈夫です。

于 2015-11-11T21:54:55.833 に答える