Angularjs – Charts.js：相同的图表元素不会在其他视图上重画

发布时间：2020-12-17 07:45:28 所属栏目：安全来源：网络整理

导读：我是新来的角色,试图创建我的第一个指令.我正在创建一个指令,将Charts.js2.0(beta)加载到我的应用程序中. 我有两个角度管理的视图,两个html视图都包含一个只包含图表元素的html页面. 问题是第一页正确绘制图表,当我转到其他视图时,图表div被加载,但图表不被

我是新来的角色,试图创建我的第一个指令.我正在创建一个指令,将Charts.js2.0(beta)加载到我的应用程序中.

我有两个角度管理的视图,两个html视图都包含一个只包含图表元素的html页面.

问题是第一页正确绘制图表,当我转到其他视图时,图表div被加载,但图表不被重新绘制.现在,如果我回到第一个查看它的空白.

链接到Plunker

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

提前致谢.

图表库中修改根范围上现有对象似乎存在问题,从而在以后忽略它.我不能真正追查这是做什么,但这是一个修复： 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()),这是我们传递的对象.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!