Angularjs - Charts.js: Gleiches Diagrammelement wird nicht auf anderer Ansicht neu gezeichnet

Question

Ich bin neu bei angularjs und versuche, meine erste Anweisung zu erstellen. Ich erstelle eine Direktive, um Charts.js2.0 (beta) in meine Anwendung zu laden.

Ich habe 2 Ansichten verwaltet von angular-route, beide HTML-Ansicht hat ng-included eine HTML-Seite, die nur Diagramme-Element enthält.

Das Problem ist die erste Seite zeichnet das Diagramm richtig, wenn ich zu anderen Ansicht gehen die Diagramme Div geladen wird, aber Diagramme nicht neu gezeichnet wird. Und jetzt, wenn ich zurück gehe, um zuerst seine Leerstelle anzusehen.

Link zu Plunker

Was mache ich falsch? Gibt es ein Problem mit meiner Richtlinie?

Vielen Dank im Voraus.

Answer 1

es ein Problem mit der Charts Bibliothek zu sein scheint auf dem Stammbereich das vorhandene Objekt zu modifizieren und damit es für immer danach zu ignorieren. Ich kann nicht wirklich zurückzuverfolgen, was es tut, aber hier ist eine Lösung für Sie: http://plnkr.co/edit/jDQFV62FSeXAQJ6o7jE8

Hier ist, was Sie

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

Above hatten, können Sie sehen, dass Sie scope.config direkt in die vorbei sind Diagrammmethode. Das scheint die Daten irgendwie zu modifizieren, und da dies durch Verweis passiert ist, modifizierst du tatsächlich $rootScope.sales.charts. Wenn Sie dieses Objekt kopieren und lokal wie unten verwenden, haben Sie dieses Problem nicht.

Hier ist, wie ich es behoben habe.

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

können Sie sehen, dass anstelle des Führens, die direkt in das Objekt, verwenden wir Winkel eine Kopie (angular.copy()) zu machen, und das ist das Objekt, das wir in geben.

Answer 2

Ich denke, es hat eine Beziehung mit der ID der Leinwand, wo Sie zeichnen. Ich hatte dieses Problem auch und es war, weil ich die gleiche Identifikation für die Leinwand von zwei Diagrammen in den verschiedenen Ansichten verwendete. Stellen Sie sicher, dass diese IDs unterschiedlich sind und dass der Javascribt jedes Graphen in der Steuerung jeder Ansicht oder in jeder Ansicht selbst ist.

Betrachten Sie Ihren pluker Ich sehe, dass Sie die gleiche html für den Graphen verwenden und ich denke, wenn angular bewegt von einer Ihrer Ansichten zu der anderen denkt, dass der Graph bereits gezeichnet wird. Durch die Unterscheidung von zwei Graphen wird das Problem gelöst. Ich weiß nicht, dass es einen anderen Ansatz gibt, der die Verwendung desselben HTML für die Zeichenfläche des Graphen ermöglicht.

Hoffe, es hilft Ihnen bei der Lösung es