Angularjs

Question

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

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

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

Link 到 Plunker

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

提前致谢。

Answer 1

我觉得跟你画的canvas的id有关系。我也遇到过这个问题，因为我在不同视图中对两个图表的 canvas 使用了相同的 ID。请确保这些 ID 不同，并且每个图形的 javasrcipt 位于每个视图的控制器中或每个视图本身。

看看你的 pluker 我发现你对图表使用了相同的 html 我猜想当 angular 从你的一个视图移动到另一个时认为图表已经画好了。区分两个图将解决问题。我不知道是否有任何其他方法允许对图表的 canvas 使用相同的 html。

希望能帮到你解决

Answer 2

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()），这就是我们传入的对象

Angularjs - Charts.js: 相同的图表元素不会在其他视图上重绘

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

charts

angularjs-directive

angularjs-ng-include

chart.js