如何在ng-repeat中等待所有项目加载，然后为每个项目渲染图表

debugcn 发表于 Dev

迈克·劳斯（Mike Rouse）

我ng-repeat用来在页面上显示报告项目的负载。每个项目都有大量的数字，因此我们希望为每个项目显示一个小图表。

我已经设置了一个指令以在每个项目中呈现图表并将数据传递给该指令。但是，在呈现图表时，我依靠一个按钮来强制进行更新：

App.controller('ScoringPolarCtrl', ["$scope", function($scope){
     $scope.forceUpdate = function () {
        console.log("Attempting to render chart ID: " + itemId);
        var ctx = document.getElementById(itemId).getContext("2d");
        $scope.scoreChart = new Chart(ctx)
        $scope.scoreChart.PolarArea($scope.scoreChartData,
        $scope.itemScoreChartOptions);
     };
}]);

这行得通，但是我想做的就是以某种方式不依赖forceUpdate()函数就可以绘制图表。

所有项目均使用来从Web服务中拉下，$http因此它们需要几秒钟的时间才能显示在页面上，因此元素实际上可以在页面chart.js上使用。

我尝试玩angular.element(document).ready()无济于事。还有什么其他方法可以强制控制器等到所有项目都首先出现之后再渲染图表？

锡尼罗

您可以$watch从控制器放置一个。以您的完成中$scope的名字命名您的项目，请考虑以下示例yourItems$http.get().then()

.controller('ScoringPolarCtrl', ['$scope', function($scope) {
    $scope.$watch('yourItems', function(newVal, oldVal) {
        if(newVal !== oldVal) {
            // render charts
        }
    });
}]);

您还可以$scope在控制器上定义一个函数，并在$http回调中从指令调用。无论是否隔离$scope，这看起来可能都不同，但这是基本思想

// -- directive
$http.get('/foo').then(function(results) {
    scope.renderCharts(results); // -- async complete
});

// -- controller
$scope.renderCharts = function(results) {
    // render charts -- this is called once you receive your $http response
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。