如何在AngularJS中延迟加载范围?

时间:2017-06-13 12:43:05

标签: javascript angularjs charts lazy-loading

我有一个使用AngularJS和d3js构建的图表生成器插件,我想根据优先级排序加载一些图表,例如:

有6个图表有3个优先级:

  • 第一优先:图表#1&图表#5
  • 第二优先:图表#3
  • 第三优先级:图表#2,图表#4&图表#6

请注意,在所有第一个优先级图表完全加载之前,您无法查看第二个优先级图表。

如何在我的示波器中使用延迟加载?

这是我的代码:

控制器

ngCharts.controller('WgListMixed', function ($rootScope, $scope, $http, $sce, $timeout, $compile, SharedDateScopes) {
        SharedDateScopes.getWidgetMixed(2).then(function(data_promised) {
            $rootScope.wgMixLists = data_promised;
            angular.forEach($rootScope.wgMixLists, function(widget) {
                var scope_name = widget.wg_id;
                var scope_name_v = widget.wg_id+"_v";
                $rootScope[scope_name] = widget.data[0];
                $rootScope[scope_name_v] = widget.data;
            });
        });
});

Serivce

ngCharts.service('SharedDateScopes', function($rootScope, $http, $q) {
        return {
            getWidgetMixed: function(dateRanges,stages) {
                var dataRange = <%=$data_range%>;
                if(typeof dateRanges !=="undefined") {
                    var dataRange = dateRanges;
                }
                var date_range_attr = "&date_range="+dataRange+"";
                if (typeof codename == "undefined") {
                    var date_range_attr = "";
                }
                var defer = $q.defer();
                $http.get('<%=[byt_control_root]%>/byt_reporting_widgets_manager?stage=mixed'+date_range_attr+'&widgets=<%=$bayt_mixed_widget%>').success(function (datas) {
                    defer.resolve(datas);
                });
                return defer.promise;
            }
        };
    });

1 个答案:

答案 0 :(得分:0)

这不是一个懒惰的加载问题,因为它是一个计时问题。

想象一下,你维护每个级别的列表。

var firstPriority = [{ID:1,loaded:false},{ID:5,loaded:false}];

你开始用承诺加载1和5的数据。当每个完成加载时,您更改数组中的标志,然后检查数组以查看数组中的所有元素现在是否都设置为true。如果是,那么你开始加载下一个级别,然后是下一个级别。

这应该做到并且无论你有多少级别都可以使用。