angular http请求加上overlay

最新推荐文章于 2023-03-25 21:06:41 发布

原创最新推荐文章于 2023-03-25 21:06:41 发布 · 287 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

angularjs 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个AngularJS应用中实现AJAX请求时显示加载指示器的方法。通过配置$httpProvider拦截器来跟踪活动请求的数量，并使用自定义指令'loadingSpinner'来显示或隐藏加载指示器。这种方法有助于改善用户体验，确保用户在进行后台操作时能够得到视觉反馈。

module.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push(function ($q, $rootScope) {
        if ($rootScope.activeCalls == undefined) {
            $rootScope.activeCalls = 0;
        }

        return {
            request: function (config) {
                $rootScope.activeCalls += 1;
                return config;
            },
            requestError: function (rejection) {
                $rootScope.activeCalls -= 1;
                return rejection;
            },
            response: function (response) {
                $rootScope.activeCalls -= 1;
                return response;
            },
            responseError: function (rejection) {
                $rootScope.activeCalls -= 1;
                return rejection;
            }
        };
    });
}]);

module.directive('loadingSpinner', function ($http) {
    return {
        restrict: 'A',
        replace: true,
        template: '<div class="loader unixloader" data-initialize="loader" data-delay="500"></div>',
        link: function (scope, element, attrs) {

            scope.$watch('activeCalls', function (newVal, oldVal) {
                if (newVal == 0) {
                    $(element).hide();
                }
                else {
                    $(element).show();
                }
            });
        }
    };
});

原文：http://stackoverflow.com/questions/17144180/angularjs-loading-screen-on-ajax-request?answertab=votes#tab-top