Angularjs - Charts.js: тот же элемент диаграммы не перерисовывается на другом представлении

Я новичок в angularjs, пытаясь создать свою первую директиву. Я создаю директиву для загрузки Charts.js2.0 (beta) в мое приложение.

У меня есть 2 представления, управляемые angular-route, оба html-представления содержат ng-страницу html, содержащую только элементы-диаграммы.

Проблема заключается в том, что первая страница правильно рисует диаграмму, когда я перехожу в другое представление, где загружается диаграмма, но диаграммы не перерисовываются. И теперь, если я вернусь, чтобы сначала просмотреть его пробел.

Ссылка на Plunker

Что я делаю неправильно? Есть ли проблема с моей директивой?

Спасибо заранее.

ОТВЕТЫ

Ответ 1

Кажется, что проблема связана с тем, что библиотека Charts модифицирует существующий объект в области корня и тем самым игнорирует его навсегда. Я не могу отследить, что это делает, но здесь исправление для вас: http://plnkr.co/edit/jDQFV62FSeXAQJ6o7jE8

Вот что вы имели

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

Выше видно, что вы передаете scope.config непосредственно в метод диаграмм. Кажется, что это как-то модифицирует данные, и поскольку это передано по ссылке, вы на самом деле изменяете $rootScope.sales.charts. Если вы копируете этот объект и используете его локально, как показано ниже, у вас нет этой проблемы.

Вот как я его исправил.

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

Вы можете видеть, что вместо того, чтобы передавать этот объект непосредственно, мы используем angular для создания копии (angular.copy()) и того, что объект мы передаем.

Ответ 2

Я думаю, что он имеет отношение к id холста, на котором вы рисуете. У меня тоже была эта проблема, потому что я использовал один и тот же идентификатор для холста двух графиков в разных представлениях. Убедитесь, что эти идентификаторы различны и что javasrcipt каждого графика находится в контроллере каждого представления или в каждом представлении.

Взглянув на ваш плукер, я вижу, что вы используете один и тот же html для графика, и я думаю, что когда angular перемещается из одного из ваших представлений в другое, считается, что график уже нарисован. Дифференциация двух графиков решит проблему. Я не знаю, существует ли какой-либо другой подход, позволяющий использовать один и тот же html для холста графика.

Надеюсь, это поможет вам решить проблему.