Controller之前的AngularJS指令事件

Posted 2023-05-09

【中文标题】Controller之前的AngularJS指令事件

【英文标题】：AngularJS directive event before Controller

【发布时间】：2014-12-08 00:18:28

【问题描述】：

我需要一些帮助才能在控制器事件之前从指令中强制执行事件。 我的场景是下一个：

我的控制器中有这样的输入，带有搜索方法：

 <input type="text" name="searchText"
  required
  data-ng-model="searchText"
  data-ng-enter="search(searchText)" />

以及一个全局注册keydown 13（ENTER键）的指令，其中包含下一个代码：

 $document.bind("keydown keypress", function(event) 
                    if (event.which === 13) 
                       //do something
                    
 

如果我将光标放在输入中并按下回车键，则在全局指令事件之前触发 ng-enter。有什么方法可以在控制器之前强制执行指令事件？

我尝试使用指令优先级，但不是解决方案。

感谢所有帮助。

【参考方案1】：

问题是事件正在冒泡 DOM。 input 事件将始终在 document 事件之前触发，因为该事件将始终冒泡。

如果您希望文档事件首先触发，您可以指定您希望它在capturing phase 处运行（注意：IE8 或更低版本不支持）。您可以在.addEventListener函数的第三个参数中指定事件捕获：

function documentKeyEvent(event) 
    if (event.which === 13) 
        //do something
    


$document[0].addEventListener("keydown", documentKeyEvent, true);
$document[0].addEventListener("keypress", documentKeyEvent, true);

Demo Here

【讨论】：

另一个问题。处理指令中的事件后，如果我想避免在控制器中执行，我该怎么做？我正在尝试使用 event.stopPropagation()、stopInmediatePropagation 和 preventDefault，但不起作用

@JorgeGuerola 如果您将文档事件设置为捕获，它将始终首先触发。您不能阻止它在输入的指令事件执行中执行，因为它会在第二个执行。我不确定我是否理解。如果您希望能够在输入事件中取消它，为什么要先触发文档事件？