40

我在 SO 上找到了一个用于 http/resource 调用的加载微调器的示例：

如您所见，实现是有效的（使用 AngularJS 1.0.5）。但是，如果您将源代码更改为 AngularJS 1.1.5。该示例不再起作用。

我了解到它$httpProvider.responseInterceptors在 1.1.5 中已弃用。相反，应该使用$httpProvider.interceptors

不幸的是，只是替换 Plunker 中的上述字符串并没有解决问题。有没有人在 AngularJS 1.1.5 中使用 HttpInterceptor 完成过这样的加载微调器？

谢谢你的帮助！

迈克尔

4

3 回答 3

112

感谢史蒂夫的提示，我能够实现加载器：

拦截器：

.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 回答
18

“responseInterceptors”已被弃用。“拦截器”用预览版中的许多增强功能取代了它。在我的脑海中，我不记得是哪个版本。这方面的文档很少，因此您最好检查源代码。

更改的要点如下所示：

$httpProvider.interceptors.push(function($q, $rootScope) {
  return {
     'request': function(config) {
        // intercepts the request
     },
     'response': function(response) {
       // intercepts the response. you can examine things like status codes
     },
     'responseError': function(response) {
       // intercepts the response when the response was an error
     }
  }
});

在角度源代码中，您将在 $HttpProvider 函数的“* #Interceptors”下找到文档。有一个示例用法与我上面发布的非常相似。

于 2013-07-24T17:39:22.893 回答
2

如果您想在解决方案中包含 JQuery，则提供/接受的解决方案很好，AngularJS 团队建议不要继续这样做。Angular 的 JQLite 不支持 element.show/.hide .... 因此，在非 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 回答