AngularJS passando para arquivo JSON pesado de diretiva
-
21-12-2019 - |
Pergunta
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?
Solução
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
};
});