AngularJS übergibt an eine weisungsintensive JSON-Datei

Question

Nun, ich glaube, ich habe das Problem gefunden, dass das Diagramm nicht angezeigt wird, und das Problem liegt wahrscheinlich darin, dass ich ein umfangreiches JSON-Objekt vom RESTful-Server lade und es an die Direktive übergebe, in der ich das Diagramm erzeuge, JSON jedoch immer noch nicht vollständig heruntergeladen wird.

Die JSON-Datei ist fast 1 MB groß, was ich auf diese Weise erhalte:

Im Controller:

dataArchive.get().then(function(result){
    $scope.getData = result;
});

Und HTML:

<divng-controller="archiveCtrl">
    <data-graph get-archive-data="getData"></data-graph>
</div>

Und in der Richtlinie:

var chart = function(data){
     var createchart = new AmCharts.makeChart("chartdiv", {
          //
     });
}

var linker = function(scope, element, attrs){
    scope.$watch('data', function(){
        chart(scope.data);
    });
}

directives.directive('dataGraph', function(){
    return {
        restrict: 'E',
        replace: false,
        scope: {
            data: '=getArchiveData'
        },
        template: '<div id="chartdiv"></div>',
        link: linker
    };
});

Aus diesem Grund wird die Direktivenvorlage wahrscheinlich leer erstellt und es wird kein Diagramm generiert.Wie kann ich dieses Problem umgehen?

Answer 1

Sie verwenden es richtig $watch Dadurch sollte die Diagrammfunktion erneut ausgelöst werden. Ich schlage jedoch vor, dass Sie ein paar andere Ansätze ausprobieren, um herauszufinden, welche hilfreich sind.

Erstens wird die Überwachungsfunktion bei der ersten Direktivenverknüpfung ausgelöst, auch wenn data ist noch nicht da – es wird einfach zurückkommen undefined, also wird beim ersten Mal die Diagrammfunktion mit aufgerufen undefined, Daher stelle ich mir vor, dass ich ein leeres Diagramm rendere.Wenn die Daten dann heruntergeladen werden, wird sie ausgelöst $watch noch einmal, aber vielleicht funktioniert Ihre Diagrammfunktion nicht, wenn sie mehrmals aufgerufen wird?Wie wäre es mit folgendem Check:

scope.$watch('data', function(){
  if (!scope.data) return
  chart(scope.data);
});

Ein anderer Ansatz, der für mich funktioniert, wenn ich auf die Auflösung einer Variablen warten muss, ist die Verwendung $observe, und die Variable nicht zum Geltungsbereich der Direktive hinzufügen:

<data-graph get-archive-data="{{ getData }}"></data-graph>

var linker = function(scope, element, attrs){
  attrs.$observe('getArchiveData', function(data){
    if (!data) return;
    chart(data);
  });
}

directives.directive('dataGraph', function(){
  return {
    restrict: 'E',
    replace: false,
    // Remove below  
    //scope: {
    //    data: '=getArchiveData'
    //},
    template: '<div id="chartdiv"></div>',
    link: linker
  };
});