Angularjs - Charts.js : Same chart element doesn't redraw on other view

Question

我是 angularjs 新手，正在尝试创建我的第一个指令。我正在创建一个指令来将 Charts.js2.0(beta) 加载到我的应用程序中。

我有 2 个由 Angular-route 管理的 View ，两个 html View 都包含了一个仅包含图表元素的 html 页面。

问题是第一页正确绘制图表，当我转到其他 View 时，图表 div 已加载，但图表未重新绘制。现在，如果我返回到第一次查看其空白。

链接到Plunker

我做错了什么？我的指令有问题吗？

提前致谢。

Answer 1

图表库修改根范围上的现有对象似乎存在问题，因此之后将永远忽略它。我无法真正追踪到底是什么在做，但这里有一个修复程序: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())，这就是我们传入的对象。