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?

¿Fue útil?

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
  };
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top