Angularjs - Charts.js: lo stesso elemento grafico non viene ridisegnato in un'altra vista

Question

Sono nuovo di angularjs, sto provando a creare la mia prima direttiva. Sto creando una direttiva per caricare Charts.js2.0 (beta) nella mia applicazione.

Ho 2 visualizzazioni gestite da angular-route, entrambe in html hanno incluso una pagina html che contiene solo elementi grafici.

Il problema è che la prima pagina disegna correttamente il grafico, quando vado in un'altra vista il grafico div è caricato ma i grafici non vengono ridisegnati. E ora se torno a vedere prima è vuoto.

Link Plunker

quello che sto facendo di sbagliato? C'è qualche problema con la mia direttiva?

Grazie in anticipo.

Answer 1

Sembra che ci sia un problema con la libreria Charts modificare l'oggetto esistente sulla portata principale, e quindi ignorando per sempre dopo. Non posso davvero rintracciare ciò che sta facendo, ma ecco una correzione per voi: http://plnkr.co/edit/jDQFV62FSeXAQJ6o7jE8

Ecco ciò che si aveva

scope.$watch('config', function(newVal) { 
    if(angular.isDefined(newVal)) { 
     if(charts) { 
     charts.destroy(); 
     } 
     var ctx = element[0].getContext("2d"); 
     charts = new Chart(ctx, scope.config); 
     //scope.$emit('create', charts); 
    } 
    }); 

Sopra, si può vedere che si sta passando scope.config direttamente nel metodo di grafici. Questo sembra modificare i dati in qualche modo, e dato che è passato per riferimento, in realtà stai modificando $rootScope.sales.charts. Se copi quell'oggetto e lo usi localmente come di seguito, non hai questo problema.

Ecco come l'ho risolto.

scope.$watch('config', function(newVal) { 
    var config = angular.copy(scope.config); 
    if(angular.isDefined(newVal)) { 
     if(charts) { 
     charts.destroy(); 
     } 
     var ctx = element[0].getContext("2d"); 
     charts = new Chart(ctx, config); 
     //scope.$emit('create', charts); 
    } 
    }); 

Si può vedere che al posto di passaggio che l'oggetto direttamente in, usiamo angolare di fare una copia (angular.copy()), e questo è l'oggetto passiamo.

Answer 2

Penso che abbia una relazione con l'id della tela in cui si sta disegnando. Ho avuto questo problema anche perché stavo usando lo stesso id per la tela di due grafici in diverse viste. Assicurati che questi ID siano diversi e che il javasrcipt di ciascun grafico sia nel controller di ciascuna vista o in ogni vista stessa.

Dando un'occhiata al pluker Vedo che si sta utilizzando lo stesso html per il grafico e immagino che quando i movimenti angolari da una delle visualizzazioni all'altra pensano che il grafico sia già disegnato. La differenziazione di due grafici risolverà il problema. Non so se esiste un altro approccio che consente di utilizzare lo stesso html per la tela del grafico.

Speranza che aiuta a risolverlo