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

问题描述

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

如何在执行 Ajax 请求时显示微调 GIF(或其他类型的忙指示符)?

我在 AngularJS 文档中没有看到类似 ajaxstartevent 的内容.

解决方案

以下是 current 过去的 AngularJS 咒语:

angular.module('SharedServices', []).config(function ($httpProvider) {$httpProvider.responseInterceptors.push('myHttpInterceptor');var spinnerFunction = 函数(数据，headersGetter){//todo 在这里启动微调器//警报('开始微调');$('#mydiv').show();返回数据；};$httpProvider.defaults.transformRequest.push(spinnerFunction);})//将拦截器注册为服务，拦截所有 angular ajax http 调用.factory('myHttpInterceptor', function ($q, $window) {返回函数(承诺){返回promise.then(函数(响应){//成功时做一些事情//todo 隐藏微调器//alert('停止旋转');$('#mydiv').hide();返回响应；}, 函数(响应){//出错时做一些事情//todo 隐藏微调器//alert('停止旋转');$('#mydiv').hide();返回 $q.reject(response);});};});//常规角度初始化在下面继续....angular.module('myApp', ['myApp.directives', 'SharedServices']).//…………

这是剩下的部分(HTML/CSS)......使用

$('#mydiv').show();$('#mydiv').hide();

切换它.注意:以上内容用于文章开头的 angular 模块

#mydiv {位置:绝对；顶部:0;左:0;宽度:100%；高度:100%；z-索引:1000；背景颜色:灰色；不透明度:0.8；}.ajax加载器{位置:绝对；左:50%；顶部:50%；左边距:-32px；/* -1 * 图像宽度/2 */边距顶部:-32px；/* -1 * 图像高度/2 */显示:块；}<div id="mydiv"><img src="lib/jQuery/images/ajax-loader.gif" class="ajax-loader"/>

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

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

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

解决方案

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']).
//.......

Here is the rest of it (HTML / CSS)....using

$('#mydiv').show(); 
$('#mydiv').hide(); 

to toggle it. NOTE: the above is used in the angular module at beginning of post

#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 请求期间显示微调器 GIF?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！