angulaire.js - AngularJS demande Json et l'attribue à la directive

Question

J'utilise la méthode suivante pour dessiner des images avec D3.js en angulaire. La première partie consiste à implémenter la fonction de dessin. Cela implique d'écrire des instructions dans directive.js, d'écrire la portée dans controller.js et d'écrire les trois parties de l'instruction dans la page. Mon problème est le suivant : lorsque je mets la valeur de portée dans controller.js dans json et que j'y accède, je ne peux pas dessiner le même graphique.
Tout d'abord, collez le code qui peut réaliser la fonction de dessin, mais la valeur de la portée est écrite localement :
1 directive.js

.

2. contrôleur.js

3. gauche.html

La méthode ci-dessus peut dessiner l'image de angulaire d3.js, comme suit~

Mais voici le problème. Je veux remplacer les données de controller.js par les données du fichier demandé par $http.get("grade.json").success(function(data).

Les données de grade.json sont les suivantes :

Une erreur se produira. . .

Pourquoi ? .

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