在AngularJS中的$ http请求期间显示微调框G​​IF？ [英] Show spinner GIF during an $http request in AngularJS?

问题描述

我正在使用AngularJS的 $ http 服务来发出Ajax请求。

I am using the $http service of AngularJS to make an Ajax request.

在执行Ajax请求时如何显示微调GIF（或其他类型的忙碌指示器）？

How can a spinner GIF (or another type of busy indicator) be shown while the Ajax request is executing?

我在AngularJS文档中没有看到类似 ajaxstartevent 的东西。

I don't see anything like an ajaxstartevent in the AngularJS documentation.

推荐答案

以下是AngularJS过去的当前：

Here are the current past AngularJS incantations:

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>

这篇关于在AngularJS中的$ http请求期间显示微调框G​​IF？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！