如何实现Angular表单任意元素首次获焦时仅触发一次事件？

我来帮你搞定这个Angular表单的焦点触发需求！你遇到的问题很典型——直接给每个元素加ng-focus会重复触发，而监听<form>元素的焦点又没用，因为表单本身不会接收焦点，焦点只会落在内部的输入控件上。下面给你两个实用的解决方案：

方案一：自定义指令（推荐，优雅且通用） #

这个方案通过自定义指令来统一管理整个表单的首次焦点触发状态，不管表单里有多少元素，都能确保只触发一次目标方法。

1. 创建两个配合使用的指令 #

// 首先定义表单级别的指令，用来存储触发状态
angular.module('yourApp').directive('firstFocusForm', function() {
  return {
    restrict: 'A',
    controller: function() {
      // 标记是否已经触发过首次焦点事件
      this.hasTriggered = false;
      
      // 标记为已触发的方法
      this.markAsTriggered = function() {
        this.hasTriggered = true;
      };
    }
  };
});

// 然后定义元素级别的指令，监听焦点事件
angular.module('yourApp').directive('firstFocus', function() {
  return {
    restrict: 'A',
    require: '^firstFocusForm', // 依赖父级的firstFocusForm指令
    link: function(scope, element, attrs, formCtrl) {
      element.on('focus', function() {
        // 只有当表单还没触发过首次焦点时才执行
        if (!formCtrl.hasTriggered) {
          formCtrl.markAsTriggered();
          // 执行绑定的表达式（比如你的clearAllMessages方法）
          scope.$apply(function() {
            scope.$eval(attrs.firstFocus);
          });
        }
      });
    }
  };
});

2. 在模板中使用指令 #

给你的表单加上first-focus-form属性，然后给所有需要监听焦点的表单元素加上first-focus属性并绑定你的方法：

<form first-focus-form>
  <input type="text" first-focus="vm.clearAllMessages()">
  <textarea first-focus="vm.clearAllMessages()"></textarea>
  <label>
    <input type="radio" name="gender" value="male" first-focus="vm.clearAllMessages()"> 男
  </label>
  <label>
    <input type="radio" name="gender" value="female" first-focus="vm.clearAllMessages()"> 女
  </label>
</form>

这样一来，不管用户点击表单里的哪一个元素，只要是第一次触发焦点，就会执行vm.clearAllMessages()，之后再点击任何元素都不会重复触发了。

方案二：组件内状态管理（简单快捷，适合小型表单） #

如果你的表单元素不多，不想写指令的话，可以直接在组件里维护一个状态变量来控制触发逻辑：

1. 在组件控制器中添加状态和处理方法 #

// 初始化状态：未触发过首次焦点
vm.hasTriggeredFirstFocus = false;

// 处理焦点事件的方法
vm.handleFirstFocus = function() {
  if (!vm.hasTriggeredFirstFocus) {
    vm.hasTriggeredFirstFocus = true;
    // 执行你的清理消息方法
    vm.clearAllMessages();
  }
};

2. 在模板中绑定每个元素的ng-focus #

给所有表单元素绑定同一个处理方法：

<form>
  <input type="text" ng-focus="vm.handleFirstFocus()">
  <textarea ng-focus="vm.handleFirstFocus()"></textarea>
  <label>
    <input type="radio" name="gender" value="male" ng-focus="vm.handleFirstFocus()"> 男
  </label>
</form>

这个方法的好处是不用写额外的指令，但缺点是需要给每个表单元素都手动绑定ng-focus，如果表单元素很多的话会比较繁琐。

为什么之前的

方案无效？ #

你之前尝试在<form>上用ng-cell-has-focus（应该是ng-focus的笔误？）没用，是因为表单元素本身默认是不能获得焦点的，只有当你给它设置了tabindex属性时才会接收焦点，但实际用户操作时，焦点还是会落在内部的输入控件上，所以监听表单的焦点事件根本不会被触发。

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