AngularJS pasar a la directiva pesados archivo JSON
-
21-12-2019 - |
Pregunta
Bueno, creo que he localizado el problema de gráfico no se muestran, y probablemente el problema sea que estoy de carga pesada objeto JSON a partir de Descanso servidor y pasar a la directiva donde estoy generando gráfico, pero json no es todavía no se descarga completamente.
Archivo JSON es casi 1mb, que estoy consiguiendo de esta manera:
En El Controlador:
dataArchive.get().then(function(result){
$scope.getData = result;
});
Y HTML:
<divng-controller="archiveCtrl">
<data-graph get-archive-data="getData"></data-graph>
</div>
Y en la directiva:
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
};
});
Probablemente debido a esto, la directiva de la plantilla se creó vacía, y el gráfico no se generará.¿Cómo puedo solucionar este problema?
Solución
Se utiliza correctamente el $watch
que debe volver a activar la ventana de gráficos de la función, pero le sugiero que pruebe un par de otros enfoques para ver lo que ayuda.
En primer lugar, la función de reloj se disparará en la directiva inicial vinculación incluso si data
no está allí todavía-le acabo de volver de undefined
, así que la primera vez se hará un llamado a la gráfica de la función con undefined
, por lo tanto , me imagino, la representación de un gráfico vacío.Entonces, cuando se descargan los datos, se activará $watch
de nuevo, pero tal vez su asignación de función no funcionará si llama varias veces..?Cómo acerca de la verificación siguientes:
scope.$watch('data', function(){
if (!scope.data) return
chart(scope.data);
});
Otro método que funciona para mí cuando tengo que esperar para la resolución de algunas variables es mediante $observe
, y no agregar a la variable en el ámbito de aplicación de la directiva:
<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
};
});