我正在使用$httpAngularJS 的服务来发出 Ajax 请求。
$http
执行 Ajax 请求时如何显示微调器 GIF(或其他类型的忙碌指示器)?
ajaxstartevent我在 AngularJS 文档中没有看到类似的东西。
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>