javascript - ng-click 与 Angular 中的 watch

Question

我有一个加载 JSON 文件然后使用该数据创建 HTML5 Canvas 绘图的指令(即 json 数据包含文本、颜色、位置等内容)。我还有许多输入字段(文本、 slider 等)，允许用户操作绘图。我看到我可以 $watch 这些元素中的每一个或使用 ng-click 并调用一个函数 - 有推荐的方法吗？

一些可能相关的注释:

• 表单元素和 Canvas 都是同一个指令模板的一部分
• 表单元素对变化使用react，因此没有提交按钮
• 这些表单元素值中的每一个都经过检查，可能会进行转换，然后修改 json 字符串。然后我调用一个刷新函数，用新数据重新加载我的 Canvas 。

我也有可能以错误的方式处理这个问题......

Answer 1

因此，据我了解，用户对某些元素(在指令内)执行了一些操作，并且每次触发这些事件时您都必须执行某些操作。

$watch 的目的是在每次特定变量的值发生变化时“观察”/做一些事情。 $scope.$watch('watchedVariable', onWatchedVariableChangedFn) 其中 onWatchedVariableChangedFn 是一个函数。这仅在值实际发生变化时触发，而不管导致变化的原因。

另一方面，您可以将事件处理程序连接到标记属性，例如 ng-click='onClickFn()'。这些从 UI 元素上的操作中触发。 [另请注意，ng-click 仅适用于可点击的元素。您似乎有多个元素(文本、 slider 等)。]

您可能必须查看究竟是什么导致这些值发生变化/导致您重新绘制 Canvas ，然后决定您要走哪条路。

编辑:您可能要考虑的第三种替代方法是触发事件($emit/$broadcast)并在适用的情况下处理($on)这些事件。