了解如何在Angular中使用第三方事件处理程序

Understanding how to use 3rd-party event handlers in Angular

本文关键字：第三方 事件处理 程序 Angular 了解      更新时间：2023-09-26

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

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

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

我目前的理解是，这只是做这种事情的错误方式，我需要做一些事情，沿着包装changeCursor事件的路线，仅在角世界中操作。然而，我对如何处理这个任务感到茫然(自定义指令似乎是搜索这类事情时出现最多的东西?)，如果有一个很好的资源来理解如何在angular中与第三方事件处理程序交互。

我会尽量让这一切变得简单。

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

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

你只需要在angular核心之外的事件改变作用域时才需要调用$apply()。

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

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

相关文章：