了解如何在 Angular 中使用 3rd-party 事件处理程序

Question

我正在创建一个简单的 Angular 应用程序，它使用 Ace 编辑器（通过 ui-ace）进行屏幕文本编辑。我希望在光标更改时运行处理程序，当光标位于某个位置时，它将更新模型对象。但是，我还希望能够单击一个按钮将光标移动到特定位置（并在必要时更新模型对象）。这是一个演示这个想法的 jsfiddle。

http://jsfiddle.net/fpzknzej/3/

当光标放在第二行上单词print 的末尾时，模型对象会更新。问题是当按下Move Cursor! 按钮时，第30 行的$scope.$apply() 会抛出一个正在进行的错误。但是，如果没有该行，绑定到模型对象的视图将不会在使用箭头键移动光标时更新。

我目前的理解是，这只是做这种事情的错误方法，我需要按照包装changeCursor 事件的方式来做一些事情，以便仅在角度世界中运行。但是，我不知道如何处理此任务（自定义指令似乎是搜索此类事物时出现最多的东西？）以及是否有很好的资源来了解如何与第三方交互- 角度内的派对事件处理程序。任何指向正确方向的指针都将不胜感激。

Answer 1

会尽量简化。

ng-click、ng-change 等所有 Angular 核心事件指令都会在内部自动调用 $apply()。

在您使用移动光标的情况下，您以ng-click 开始摘要，然后有一点循环问题，即从ng-click 内部触发的外部ace 事件也将调用$apply()。

您真的只想在更改角度核心之外的范围的事件需要更新视图时调用$apply()。

针对您的情况的短期解决方法是改用$timeout()。 这将被添加到当前摘要堆栈队列的末尾，并在其他摘要完成后调用 $apply()。

至于指令，是的，这段代码确实属于指令，但你不会真正改变它的当前结构......只是将它移动到应用程序的不同部分。短期内不会改变目前正在发生的事情