我使用角度的$ http服务来发出ajax请求。
如何在ajax请求期间显示加载程序gif？
我在文档中没有看到任何ajaxstartevent或类似的事件。
这里是当前过去的AngularJS咒语：
angular.module('SharedServices',[])
.config(function ($httpProvider) {
$httpProvider.responseInterceptors.push('myHttpInterceptor');
var spinnerFunction = function (data,headersGetter) {
// todo start the spinner here
//alert('start spinner');
$('#mydiv').show();
return data;
};
$httpProvider.defaults.transformRequest.push(spinnerFunction);
})
// register the interceptor as a service,intercepts ALL angular ajax http calls
.factory('myHttpInterceptor',function ($q,$window) {
return function (promise) {
return promise.then(function (response) {
// do something on success
// todo hide the spinner
//alert('stop spinner');
$('#mydiv').hide();
return response;
},function (response) {
// do something on error
// todo hide the spinner
//alert('stop spinner');
$('#mydiv').hide();
return $q.reject(response);
});
};
});
//regular angular initialization continued below....
angular.module('myApp',[ 'myApp.directives','SharedServices']).
//.......
这里是其余的(HTML / CSS)….使用
$('#mydiv').show();
$('#mydiv').hide();
切换它。注意：以上是在开始后的角模块中使用
#mydiv {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background-color:grey;
opacity: .8;
}
.ajax-loader {
position: absolute;
left: 50%;
top: 50%;
margin-left: -32px; /* -1 * image width / 2 */
margin-top: -32px; /* -1 * image height / 2 */
display: block;
}
<div id="mydiv">
<img src="lib/jQuery/images/ajax-loader.gif" class="ajax-loader"/>
</div>
