用于 ajax 模板的 Angular 和预加载器

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>