我知道有几种方法可以在 Angular js 中加载指示器（例如：https ://gist.github.com/maikeldaloo/5140733 ）。
但是它们要么必须为每个调用进行配置，要么 - 如果它们按照我的意愿在全局范围内运行 - 只适用于 http-requests，而不适用于服务中使用的 $q-promises。
到目前为止，我看到的全局加载指示器可以使用
$httpProvider.responseInterceptors.push(interceptor);
有没有类似的东西$q，比如 a $qProvider.reponseInterceptors？如果没有，实现这种功能的最方便的方法是什么？例如，是否可以使用某种装饰器模式？
尽管我发现它非常复杂、不必要并且可能损坏了，但您可以 装饰$q和覆盖它的defer功能。
每次有人要求新defer()时，它都会运行您自己的版本，这也会增加一个计数器。在分发defer对象之前，您注册一个finally回调（仅限 Angular 1.2.0 always，但也可能适合）以递减计数器。
$rootScope最后，当这个计数器大于 0 时，你添加一个 watch 来监控（比pendingPromissesin$rootScope和 bind like快ng-show="pendingPromisses > 0"）。
app.config(function($provide) {
$provide.decorator('$q', ['$delegate', '$rootScope', function($delegate, $rootScope) {
var pendingPromisses = 0;
$rootScope.$watch(
function() { return pendingPromisses > 0; },
function(loading) { $rootScope.loading = loading; }
);
var $q = $delegate;
var origDefer = $q.defer;
$q.defer = function() {
var defer = origDefer();
pendingPromisses++;
defer.promise.finally(function() {
pendingPromisses--;
});
return defer;
};
return $q;
}]);
});
然后，绑定到继承自的范围的视图$rootScope可以具有：
<span ng-show="loading">Loading, please wait</span>
（这不适用于具有隔离范围的指令）
看到它住在这里。
官方文档中有一个很好的例子，适用于当前稳定的 1.2.0。
http://docs.angularjs.org/api/ng.$http（页面顶部四分之一，搜索拦截器）
我对这些文档的提取使我找到了这个解决方案：
angular.module('RequestInterceptor', [])
.config(function ($httpProvider) {
$httpProvider.interceptors.push('requestInterceptor');
})
.factory('requestInterceptor', function ($q, $rootScope) {
$rootScope.pendingRequests = 0;
return {
'request': function (config) {
$rootScope.pendingRequests++;
return config || $q.when(config);
},
'requestError': function(rejection) {
$rootScope.pendingRequests--;
return $q.reject(rejection);
},
'response': function(response) {
$rootScope.pendingRequests--;
return response || $q.when(response);
},
'responseError': function(rejection) {
$rootScope.pendingRequests--;
return $q.reject(rejection);
}
}
});
然后，您可以在 ng-show 表达式中使用 pendingRequests>0。
由于 OP 要求，这是基于我们用于当前正在开发的应用程序的方法。此方法不会改变的行为$q，而是添加了一个非常简单的API 来处理需要某种视觉指示的 Promise。尽管这需要在使用它的每个地方进行修改，但它只是一个衬里。
例如，有一个服务ajaxIndicator知道如何更新 UI 的一部分。每当类似 Promise 的对象需要提供指示直到 Promise 被解决时，我们使用：
// $http example:
var promise = $http.get(...);
ajaxIndicator.indicate(promise); // <--- this line needs to be added
如果您不想保留对 Promise 的引用：
// $http example without keeping the reference:
ajaxIndicator.indicate($http.get(...));
或使用资源：
var rc = $resource(...);
...
$scope.obj = rc.get(...);
ajaxIndicator.indicate($scope.obj);
（注意：对于 Angular 1.2，这需要 tweeking，因为$then()资源对象上没有。）
现在在根模板中，您必须将指标绑定到$rootScope.ajaxActive，例如：
<div class="ajax-indicator" ng-show="ajaxActive"></div>
（从我们的源代码修改。）警告：此实现不考虑嵌套调用！（我们的要求要求 UI 阻塞，所以我们不期望嵌套调用；如果有兴趣，我可以尝试增强此代码。）
app.service("ajaxIndicator", ["$rootScope"], function($rootScope) {
"use strict";
$rootScope.ajaxActive = false;
function indicate(promise) {
if( !$rootScope.ajaxActive ) {
$rootScope.ajaxActive = true;
$rootScope.$broadcast("ajax.active"); // OPTIONAL
if( typeof(promise) === "object" && promise !== null ) {
if( typeof(promise.always) === "function" ) promise.always(finished);
else if( typeof(promise.then) === "function" ) promise.then(finished,finished);
else if( typeof(promise.$then) === "function" ) promise.$then(finished,finished);
}
}
}
function finished() {
$rootScope.ajaxActive = false;
}
return {
indicate: indicate,
finished: finished
};
});
几周前我有同样的大问题，我碰巧做了一些指令来表示操作按钮的加载状态和 ng-repeat 内容加载。
我只是花了一些时间将它推到了github上： https ://github.com/ocolot/angularjs_loading_buttons
我希望它有所帮助。