处理重绘的角度方法是什么？

Question

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

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

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

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

那么接近这个的角度方式是什么，同时仍然有效率？

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

Answer 1

当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