javascript - 优先考虑 jQuery 在脚本之前

Question

我的 html 文件中的脚本有问题。问题是通过 jQuery 更新变量，然后从中创建图表。

我使用 Angular 来创建图表，因此不可能将其放入不同的 jQuery 中。

部分代码:

var chartData = [];

            $.getJSON('../json/testData.json', function (json) {
                for (var i=0; i < json.length; i++){
                    var j = json[i].Value;
                    chartData.push(j);
                }
            });

angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {

            $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
            $scope.series = ['Series A', 'Series B'];
            $scope.data = [
                [65, 59, 80, 81, 56, 55, 40],
                [28, 48, 40, 19, 86, 27, 90],
                chartData
            ];
        });

我想要实现的目标:从 JSON 获取数据，更新图表数据，将更新后的变量放入图表中。

目前效果如何？ -> 它做了所有事情，然后是 jQuery，所以我在图表中有空数组。

我的研究: 我试图操纵变量和 jQuery 的范围。结果还是一样。 当我将所有内容放入函数中时， Angular 不起作用。

下面帖子的解决方案:

    angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope, $http) {

        $http.get('../json/testData.json').then(function (response) {
            for (var i = 0; i < response.data.length; i++) {
                var j = response.data[i].Value;
                jsondata.push(j);
            }
        });

Answer 1

为什么不在 Controller 内使用 $http 服务来获取数据，然后将其放在作用域中:

angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope, $http) {
    $scope.data = [];
    $http.get('../json/testData.json').then(function (response) {
        for (var i = 0; i < response.data.length; i++) {
            var j = response.data[i].Value;
            chartData.push(j);
        }
    });
});