如何创建事件触发时执行函数的自定义指令？附AngularJS示例

这是一个非常实用的自定义指令，专门处理回车键的触发逻辑，完美兼顾了表单提交和文本域换行的需求！我来帮你拆解这个AngularJS指令的实现细节，以及如何使用它：

完整指令实现代码 #

export default angular.module('cd.enter', [])
.directive('cdEnter', () => {
  return {
    link: (scope, element, attrs) => {
      element.bind("keydown", (event) => {
        if (!event.shiftKey && event.which === 13) {
          event.preventDefault();
        }
      });
      element.bind("keyup", (event) => {
        if (!event.shiftKey && event.which === 13) {
          event.preventDefault();
          scope.$apply(() => {
            scope.$eval(attrs.cdEnter);
          });
        }
      });
    }
  }
});

指令核心逻辑拆解 #

• 事件监听：同时绑定keydown和keyup两个事件，确保回车键的触发逻辑完整覆盖
• 条件判断：仅当未按下Shift键且**按键为回车键（keyCode 13）**时，才执行后续操作——这就精准实现了「Shift+回车允许换行，单独回车触发绑定函数」的核心需求
• 阻止默认行为：在keydown阶段就阻止默认动作，避免浏览器自动执行表单提交或文本域换行；keyup阶段再次阻止是为了确保万无一失，防止特殊场景下的默认行为漏网
• AngularJS上下文同步：使用scope.$apply()包裹执行逻辑，确保绑定的函数能在AngularJS的脏值检测周期内运行，避免视图与数据不同步的问题；scope.$eval(attrs.cdEnter)则是解析并执行指令上绑定的表达式或函数

使用示例 #

你可以在任何可输入元素上使用这个指令，绑定你需要触发的函数：

<!-- 文本域场景：单独回车提交内容，Shift+回车正常换行 -->
<textarea ng-model="articleContent" cd-enter="publishArticle()"></textarea>

<!-- 搜索框场景：回车直接触发搜索操作 -->
<input type="text" ng-model="searchKeyword" cd-enter="executeSearch()">

内容的提问来源于stack exchange，提问作者tic