我正在使用$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>