在Ajax请求Angularjs载入画面 [英] Angularjs loading screen on ajax request

问题描述

使用Angularjs，我需要显示加载屏幕（简单的微调），直到AJAX请求完成。请建议用code段的想法。

Using Angularjs , I need to show a loading screen (a simple spinner) until ajax request is complete. Please suggest any idea with a code snippet.

推荐答案

，最好是有一个指令做的一切你：

Instead of setting up a scope variable to indicate data loading status, it is better to have a directive does everything for you:

angular.module('directive.loading', [])

    .directive('loading',   ['$http' ,function ($http)
    {
        return {
            restrict: 'A',
            link: function (scope, elm, attrs)
            {
                scope.isLoading = function () {
                    return $http.pendingRequests.length > 0;
                };

                scope.$watch(scope.isLoading, function (v)
                {
                    if(v){
                        elm.show();
                    }else{
                        elm.hide();
                    }
                });
            }
        };

    }]);

通过该指令，所有你需要做的就是给任何加载动画元素的加载属性：

With this directive, all you need to do is to give any loading animation element an 'loading' attribute:

<div class="loading-spiner-holder" data-loading ><div class="loading-spiner"><img src="..." /></div></div>

您可以在页面上多工微调。在哪里以及如何布置那些纺纱是由你和指令将自动干脆关闭它开/关你。

You can have multiple loading spinners on the page. where and how to layout those spinners is up to you and directive will simply turn it off/off for you automatically.

这篇关于在Ajax请求Angularjs载入画面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！