Angular 和 ajax 模板的预加载器

Question

我有一个包含多个模板的仪表板。

在其中一个模板中，我有一个简单的列表。我在我的 li 上使用 ng-repeat，这样我就可以保持我的列表动态。但事情是这样的 -

由于我是使用 $http 获取此列表的数据，因此它很可能有一两秒为空列表。

一个很好的解决方案是默认为我的列表添加一个预加载器，但是您建议如何为此添加逻辑？最简单的方法是像这样添加它：

$http({
    method: 'GET',
    url: './data/websites.json'
}).then(function successCallback(response) {
    // hide preloader, etc
});

这是正确的方法吗？

此外 - 是否可以控制模板转换？例如，当用户离开页面时，我想在 X 毫秒内显示预加载器，然后才移动到请求的页面

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>

Angular 和 ajax 模板的预加载器

Angular and preloader for an ajax template

ajax

preloader

angularjs