2

我正在制作一个图表应用程序，允许您使用拖放界面创建图表。

我有 highcharts，我正在使用highcharts-ng指令。

该指令监视标题、选项和系列。当一个人做出改变时，我会处理它们并对选项对象进行改变。然后 highcharts-ng 重绘图表。

我发现的问题是我连续更改了一些属性，例如 options.xAxis 和 options.yAxis，每当我这样做时，应用程序都会有点滞后，因为它会为每次更改启动重绘。

那么解决这个问题的角度方法是什么，同时仍然有效呢？

我想到的一个潜在解决方案是在 highcharts-ng 指令中添加一个标志，并在它发生更改时触发它。然后在我处理完数据后更改它。另一种可能的解决方案是在 highchart-ng 指令中监听某个事件，然后在收到该事件时触发重绘。但是这些解决方案对我来说似乎/感觉有点 hacky。

4

1 回答 1

5

Angular 会进行自己的脏检查，并且（理想情况下总是，但实际上）在其相应的视图模型发生变化时重写 DOM 的 Angular 控制部分。我认为这种行为对 Angular 来说非常重要，如果你不喜欢它，你要么更好地解决它，要么使用不同的数据绑定框架。

我推荐的解决方法基本上就是您在第一个选项中描述的：视图模型中的视图模型。在指令的范围内有一个私有变量，用于跟踪您感兴趣的更改，这些更改发生的频率比您想要重绘的频率高。然后，当您准备好重绘时（您需要自己的逻辑来确定“准备好”...时间？特定类型的更改？特定的更改阈值？），通过设置您的私有来更新真实视图模型变量回到真实视图模型上的原始字段。

代码草图：

// (inside the directive)

var _options = $scope.options;

// ...
// rapidfire updates happen; save them to _options rather than $scope.options

// ...
// now you're ready to redraw:

$scope.options = _options; // angular now knows $scope is dirty and triggers the redraw
于 2013-08-09T19:43:08.267 回答