使用httpInterceptor和AngularJS 1.1.5实现加载微调器
我已经find一个加载微调器的例子在http /资源调用这里SO：
- 在httpIntercept上设置rootScopevariables （Plunker： http : //plnkr.co/edit/32Mh9UOS3Z4vnOtrH9aR? p=preview）
正如你所看到的实现工作（使用AngularJS 1.0.5）。 但是，如果您将源更改为AngularJS 1.1.5。 这个例子不起作用了。
我了解到$httpProvider.responseInterceptors在1.1.5中已被弃用。 相反，应该使用$httpProvider.interceptors
不幸的是，在Plunker中replace上面的string并不能解决问题。 有没有人曾经在AngularJS 1.1.5中使用HttpInterceptor做过这样的加载微调器？
谢谢你的帮助！
迈克尔
感谢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>
“responseInterceptors”已被弃用。 “拦截器”在预览版本中用许多增强function取代了它。 关于我的头顶，我不记得哪个版本。 这方面的文档很less，所以你最好检查源代码。
改变的要点如下所示：
$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 } } });
在angular源中，您可以在$ HttpProvider函数的“*＃Interceptors”下find文档。 有一个示例用法非常类似于我上面发布的内容。
提供/接受的解决scheme是好的， 如果你想在你的解决scheme中包含JQuery， AngularJS团队build议不要这样做。 在Angular的JQLite中不支持element.show/.hide ….所以在非jQuery的会话中运行下面的重构是必须的：
更改HTML元素以添加一个“隐藏”类
<div id="loaderDiv" loader class="hidden"> <img src="Contenthttp://img.dovov.comyourgif.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") } }); } } })();
工厂现在很好。
