angular.js - AngularJS 请求 Json 并 赋值到 指令 中

Question

我在用如下方法在angular中用D3.js 画图。第一部分是实现画图功能的。涉及到directive.js写指令，controller.js中写作用域scope，在页面中写指令的p三个部分。我的问题是：在把contoller.js中的作用域scope的值放入json中访问时，无法画出相同的图形了。
首先贴上能实现画图功能，但是scope值写在本地的代码：
1、directive.js

2、controller.js

3、left.html

以上方法便能画出 angular+d3.js的图，如下~

可是，问题来了，想把controller.js 中的数据，变成$http.get("grade.json").success(function(data)这样请求的文件内的数据。

grade.json的数据如下：

会出现错误。。。

为什么呀。。

Answer 1

Puisque les instructions sont utilisées, essayez d'utiliser des portées indépendantes pour maintenir l'indépendance des instructions. Dans votre cas, vous pouvez le changer par ceci

.directive('linearChart', function () {
    return {
        scope: {
            chartData: '=chartData'
        },
        restrict: 'EA',
        template: '<svg width="400" height="200"></svg>',
        link: function (scope, element, attrs) {
            scope.$watch('chartData', function (newData, oldData) {
                if (!newData) return;
                drawLineChart(newData);
            });

            function drawLineChart(data) {
                //todo
            }
        }
    }
})

Answer 2

C’est fait. . . Vous pouvez imprimer votre salesDataToPlot dans l'instruction pour voir si c'est null Le message d'erreur devrait être là. De plus, pour le transfert de données entre l'instruction et le contrôleur, utilisez une portée indépendante puis utilisez les paramètres scope. sont liés aux valeurs correspondantes ou des étendues héritées sont utilisées.

Answer 3

La clé dans le fichier json doit être entre guillemets

Answer 4

Ceci est asynchrone lors de la requête $http, et la directive est déjà en cours de compilation au moment du chargement du dom, salesData n'est bien sûr pas défini.

Tu devrais faire ça

$http.get(api)
    .then(function(res) {
        appendChart();  //这时才把指令加载到dom里去
    })

= = OMG, la personne qui pose la question peut-elle poser la question sans publier directement la capture d'écran du code ? segmentfault prend en charge la syntaxe markdown, cher