Javascript 如何等待在ng repeat中加载所有项目，然后再为每个项目呈现图表

我正在使用

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（）

函数的情况下，以某种方式让图表呈现出来

这些项目都是使用

$http

从web服务中下拉出来的，因此它们需要几秒钟的时间才能显示在页面上，因此元素实际上可以在页面上使用

chart.js

---

我尝试过使用

angular.element（document）.ready（）

但没有效果。有没有其他方法可以强制控制器等待，直到所有项目都在那里，然后再呈现图表？

您可以从控制器放置一个

$watch

。在<代码> $范围<代码> > <代码> > YouTube <代码> >在您的代码> $http.GETE（）中（）（代码）>完成，请考虑下面的例子

.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
}

---

如果您维护一个单独的数组，并在完成填充后将作用域数组设置为“temp”数组，该怎么办。然后，这将触发REPEATNG。如果将每行的数据作为单独的请求下拉，则图表的指令最有意义。指令会下载数据，完成后会将图表装箱供itI使用。我会将两者结合起来。之前不需要使用$scope.$watch，所以期待着尝试。@Mikrouse极好，请随时向我通报您的发现，我们可以帮助您解决问题this@MikeRouse你能解决这个问题吗？关于这个问题有什么新的细节吗？我对$watch的建议运气不太好。oldVal和newVal总是顽固地固定为“null”。我尝试将$scope.$digest（）放在else中，但这抱怨digest已经在运行，然后我就陷入了一个人们争论如何处理这个问题的兔子洞。所以我认为angular必须有一种更简单的方法来提取元素，结果我可以使用

angular.element.find（“canvas”）

，然后使用

angular.forEach

调用我的forceUpdate（）方法。因为我使用的是一个指令，所以它只能找到一个canvas元素，所以对我来说没问题。我很惊讶

$watch

没有按照您的要求工作。您是否在

$http

成功回调中为

$scope

赋值？这是关键，比如在回调中分配

$scope.yourItems

=

响应。data

或其他什么，Angular将“跟踪”

“yourItems”

，并在值更改时启动此函数。不管怎样，很高兴听到你明白了。你介意我用你的解决方法更新我的答案吗@米克罗斯