AngularJS passando para arquivo JSON pesado de diretiva

Question

Bem, acho que localizei o problema do gráfico não aparecer, e o problema é provavelmente que estou carregando um objeto JSON pesado do servidor RESTful e passando-o para a diretiva onde estou gerando o gráfico, mas o json ainda não foi baixado completamente.

O arquivo JSON tem quase 1 MB, o que estou conseguindo desta forma:

No controlador:

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

E HTML:

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

E na diretiva:

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

Provavelmente por causa disso, o modelo de diretiva será criado vazio e o gráfico não será gerado.Como posso solucionar esse problema?

Answer 1

Você está usando corretamente $watch o que deve reativar a função de gráfico, mas sugiro que você tente algumas outras abordagens para ver o que ajuda.

Em primeiro lugar, a função watch será acionada na vinculação inicial da diretiva, mesmo que data ainda não está lá - ele apenas retornará undefined, então na primeira vez ele chamará a função de gráfico com undefined, portanto, imagino, renderizando um gráfico vazio.Então, quando os dados forem baixados, ele irá acionar $watch novamente, mas talvez sua função de gráfico não funcione se for chamada várias vezes.Que tal a seguinte verificação:

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

Outra abordagem que funciona para mim quando preciso esperar a resolução de alguma variável é usar $observe, e não adicionando a variável ao escopo da diretiva:

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