Javascript 是否有相当于$(document.ajaxSuccess()的AngularJS?
在AngularJS中,我希望创建一个“一网打尽”的ajax加载程序,它不需要为了工作而编织到每个控制器中。传统上,在jQuery中,我可以这样做:Javascript 是否有相当于$(document.ajaxSuccess()的AngularJS?,javascript,jquery,ajax,angularjs,Javascript,Jquery,Ajax,Angularjs,在AngularJS中,我希望创建一个“一网打尽”的ajax加载程序,它不需要为了工作而编织到每个控制器中。传统上,在jQuery中,我可以这样做: (function globalAjaxLoader($){ "use strict"; var ajaxBoundElements = [$posts, $navigationLinks]; ajaxBoundElements.forEach(function($elm){ $elm.on('click', fun
(function globalAjaxLoader($){
"use strict";
var ajaxBoundElements = [$posts, $navigationLinks];
ajaxBoundElements.forEach(function($elm){
$elm.on('click', function(){
$loader.show();
});
$(document).ajaxSuccess(function (event, XMLHttpRequest, ajaxOptions){
$loader.hide();
});
})(jQuery);
然而,在AngularJS中,我没有看到一种检测ajaxCompletion的全局方法(也就是说,没有通过AngularJS执行每个ajax调用所返回的承诺)
谢谢。使用拦截器也可以实现同样的效果
myModule
.factory('httpResponseInterceptor', [
'$q',
function ($q) {
return {
request: function (request) {
$loader.show();
return request;
},
requestError: function () {
$loader.hide();
},
response: function (response) {
$loader.hide();
return response || $q.when(response);
},
responseError: function (rejection) {
$loader.hide();
return $q.reject(rejection);
}
}
}
])
.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push('httpResponseInterceptor');
$httpProvider.defaults.transformRequest.push(function (data) {
$loader.show();
return data;
});
})
我已经组装了一个jsBin,展示了如何使用http拦截器实现这一点
我使用了$rootScope.loadingCount
,因此您可以基于此实际ng show
和ng hide
。下面是一个标记示例(您显然会使用一些不同的东西:
<h1 ng-show="loadingCount > 0">Loading...</h1>
您可能希望查看httpInterceptors——您可能希望在文件的
请求
和响应
或响应错误
部分中显示和隐藏您的加载程序interceptor@Tom是的,我开始阅读这篇文章,但是我始终无法找到让加载程序正常工作的方法或适当的技术还有一些关于ajax加载器的问题或是不完整的/没有回答的,但是大多数都没有全局应用这个功能。既然DOM是通过显示/隐藏加载器来操作的,那么是否有必要像NG文档建议的那样在指令中显示隐藏部分?除此之外,您所说的是非常直截了当的(谢谢)在这样的问题上谁是dv?我做了研究,我的代码很短很好(而且是正确的)…应该强制解释下选问题,如果用户dv没有任何理由,他们应该被禁止:/但这正是我的想法。
angular
.module('app', [])
.config(httpInterceptorConfig)
.factory('loadingDialogInterceptor', loadingDialogInterceptor);
// create your interceptor
loadingDialogInterceptor.$inject = ['$q', '$rootScope'];
function loadingDialogInterceptor($q, $rootScope) {
$rootScope.loadingCount = 0;
function showLoading() {
$rootScope.loadingCount++;
}
function hideLoading() {
if ($rootScope.loadingCount > 0) {
$rootScope.loadingCount--;
}
}
return {
request: function (config) {
showLoading();
return config || $q.when(config);
},
response: function(response) {
hideLoading();
return response || $q.when(response);
},
responseError: function(response) {
hideLoading();
return $q.reject(response);
}
};
}
// actually register your interceptor
httpInterceptorConfig.$inject = ['$httpProvider'];
function httpInterceptorConfig($httpProvider) {
$httpProvider.interceptors.push('loadingDialogInterceptor');
}