Angularjs 根据 ajax 请求加载屏幕

Question

使用 Angularjs ，我需要显示一个加载屏幕(一个简单的旋转器)，直到 ajax 请求完成。请使用代码片段提出任何想法。

Answer 1

与其设置作用域变量来指示数据加载状态，不如让指令为您完成所有操作:

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();
                    }
                });
            }
        };

    }]);

使用此指令，您所需要做的就是为任何加载动画元素提供“loading”属性:

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

页面上可以有多个加载微调器。在何处以及如何布局这些微调器取决于您，指令将自动为您打开/关闭它。