Question

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

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

由于我使用$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();
                    }
                });
            }
        };

    }]);

使用此指令，您需要做的就是给任何加载动画元素一个“加载”＃39;属性：

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

ajax模板的Angular和preloader

1 个答案: