我在SO上找到了一个用于http / resource调用的加载微调器的示例:
如您所见,实现工作正常(使用AngularJS 1.0.5)。但是,如果将源更改为AngularJS 1.1.5。该示例不再起作用。
我了解到$httpProvider.responseInterceptors1.1.5不推荐使用。相反,应该使用$httpProvider.interceptors
$httpProvider.responseInterceptors
$httpProvider.interceptors
不幸的是,仅在Plunker中替换上述字符串并不能解决问题。有没有人使用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>