Angularjs - Charts.js: Ten sam element wykresu nie odrysowuje na innym widoku

Question

Jestem nowy w angularjs, próbując stworzyć moją pierwszą dyrektywę. Tworzę dyrektywę, aby załadować Charts.js2.0 (beta) do mojej aplikacji.

Mam 2 widoki zarządzane przez angular-route, oba widoki html zawierają stronę HTML zawierającą tylko element wykresu.

Problem polega na tym, że pierwsza strona prawidłowo rysuje wykres, gdy przejdę do innego widoku, wykres div zostanie załadowany, ale wykresy nie zostaną ponownie narysowane. A teraz, jeśli wrócę do pierwszego widoku, to puste.

Link do Plunker

Co robię źle? Czy jest jakiś problem z moją dyrektywą?

Z góry dziękuję.

Answer 1

Wydaje się, że problem z biblioteki Wykresy modyfikując istniejący obiekt na zakres głównego, a tym samym ignorując to zawsze potem. I naprawdę nie można śledzić w dół, co się robi, ale tutaj jest poprawka dla Ciebie: http://plnkr.co/edit/jDQFV62FSeXAQJ6o7jE8

Oto co miał

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

Powyżej widać, że jesteś przechodzącą scope.config bezpośrednio do metoda wykresów. Wydaje się, że w jakiś sposób modyfikuje dane, a ponieważ jest to przekazywane przez odniesienie, w rzeczywistości modyfikujesz $rootScope.sales.charts. Jeśli skopiujesz ten obiekt i użyjesz go lokalnie, jak poniżej, nie masz tego problemu.

Oto jak to naprawiłem.

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

Widać, że zamiast przekazywać tego obiektu bezpośrednio, używamy kątowe zrobić kopię (angular.copy()), i to jest przedmiotem mijamy w.

Answer 2

Myślę, że ma związek z id płótna, gdzie rysujesz. Miałem też ten problem i dlatego, że używałem tego samego identyfikatora dla kanwy dwóch wykresów w różnych widokach. Upewnij się, że te identyfikatory są różne i że javaskrypt każdego wykresu znajduje się w kontrolerze każdego widoku lub w każdym widoku.

Spojrzenie na twój pluker Widzę, że używasz tego samego html dla wykresu i domyślam się, że gdy kątowy przesuwa się z jednego z twoich widoków do drugiego, myśli, że wykres jest już narysowany. Rozróżnienie dwóch wykresów rozwiąże problem. Nie wiem, czy istnieje inne podejście, które pozwala na użycie tego samego html dla obszaru roboczego wykresu.

Nadzieja to pomaga rozwiązać to