Wie rendert man eine Direktive nur nachdem Daten aus tsv in AngularJS geladen wurden

Question

Ich möchte d3.js und angularjs integrieren. Ich muss einen Liniengraphen zeichnen. Daten werden aus einer tsv-Datei geladen. Ich habe ein Problem beim Rendern des Graphen und der Fehler besagt, dass die Daten noch nicht geladen wurden und der Graph gerendert wird. Ich möchte, dass der Graph nur dann gerendert wird, wenn die Daten in der Scope-Variablen geladen sind. Bitte helfen Sie. Hier ist der Controller-Code

phonecatControllers.controller('MainCtrl', ['$scope',
     function($scope) {
       d3.tsv("sample.tsv", function(error, data) {
       $scope.d3Data = data;
 });
}]);

Und hier ist der Direktiven-Code

directives.directive('d3Bar', [ function() {
return {
    restrict : 'E',
    scope : {
        data : '='
    },
    link : function(scope, element) {
        scope.$watch('data', function(newData, oldData) {
            drawLine(newData);
        }, true);
    }
}

}

und html ist

Answer 1

Verwenden Sie ng-if mit Ihrer Bedingung, ob Daten verfügbar sind oder nicht, um dieses Problem zu lösen.

HTML:

So wird Ihre Direktive nur geladen, wenn d3Data Daten enthält.

Answer 2

Setzen Sie eine if-Bedingung in Ihrer Uhr ein, um zu überprüfen, ob Ihr Datenelement bereit ist oder nicht

directives.directive('d3Bar', [function() {
    return {
        restrict : 'E',
        scope : {
            data : '='
        },
        link : function(scope, element) {
            scope.$watch('data', function(newData, oldData) {
                if(newData){
                    drawLine(newData);
                }
            }, true);
        }
    }
}])