javascript - 处理重绘的 Angular 方法是什么？

Question

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

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

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

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

那么在保持高效的同时，有什么 Angular 方法可以解决这个问题呢？

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

Answer 1

Angular 会进行自己的脏检查，并且(理想情况下总是如此，但实际上并非如此)只要相应的 View 模型发生变化，就会重写 DOM 的 Angular 控制部分。我认为这种行为对于 Angular 来说是如此基础，如果您不喜欢它，您最好解决它，或者使用不同的数据绑定(bind)框架。

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

代码草图:

// (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