Angularjs passando alla direttiva Heavy JSON File

Question

Beh, penso di aver individuato il problema del grafico non mostrato, e il problema è probabilmente che sto caricando il pesante oggetto JSON dal server riposante e passandolo alla direttiva in cui sto generando grafico, ma JSON non è ancora noscaricato completamente.

Il file JSON è quasi 1 MB, che sto ottenendo in questo modo:

nel controller:

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

.

e HTML:

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

.

e nella direttiva:

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
    };
});

.

Probabilmente a causa di ciò, il modello di direttiva verrà creato vuoto e il grafico non verrà generato. Come posso soluzionare questo problema?

Answer 1

Si sta correttamente utilizzando $watch che dovrebbe ri-Trigger la funzione di grafici, ma ti suggerisco di provare alcuni altri approcci per vedere quale aiuta.

In primo luogo, la funzione di orologio si attiverà sulla direttiva iniziale che collega anche se data non è ancora lì - restituirà solo undefined, quindi la prima volta che chiamerà la funzione grafico con undefined, quindi, immagino, rendendo vuotografico.Quindi, quando i dati vengono scaricati, attiverà nuovamente $watch, ma forse la tua funzione di grafico non funzionerà se chiamata più volte ..?Che ne dici del seguente controllo:

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

.

Un altro approccio che funziona per me quando devo aspettare che la risoluzione di qualche variabile stia utilizzando $observe e non aggiungendo la variabile nell'ambito della direttiva:

<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
  };
});

.