我是新来的角色,试图创建我的第一个指令.我正在创建一个指令,将Charts.js2.0(beta)加载到我的应用程序中.
我有两个角度管理的视图,两个html视图都包含一个只包含图表元素的html页面.
问题是第一页正确绘制图表,当我转到其他视图时,图表div被加载,但图表不被重新绘制.现在,如果我回到第一个查看它的空白.
我做错了什么？我的指令有什么问题吗？
提前致谢.
图表库中修改根范围上现有对象似乎存在问题,从而在以后忽略它.我不能真正追查这是做什么,但这是一个修复：
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()),这是我们传递的对象.
