如何在 AngularJS 中的页面加载时自动将焦点设置在输入字段上？

在 AngularJS 中，我们可以使用指令来设置在页面加载时自动将焦点设置在输入字段上。下面是需要注意的几个点：

1. 使用指令设置自动焦点

在 AngularJS 中，我们可以使用 ng-focus 指令来设置自动焦点。这个指令会在所指定的元素获取到焦点时触发。以下是一个使用 ng-focus 指令的例子：

<input type="text" ng-focus="setFocus()">

这里我们将 ng-focus 指令绑定到了一个方法 setFocus() 上。这个方法将在输入元素获取焦点时被调用。下面我们来看一下这个方法的实现。

2. 实现 setFocus() 方法

setFocus() 方法可以使用 JavaScript 中的 focus() 方法来将焦点设置在指定元素上。以下是 setFocus() 方法的实现：

$scope.setFocus = function() {
  document.getElementById('myInput').focus();
};

这里我们通过 document.getElementById() 方法来获取输入元素，然后使用 focus() 方法将焦点设置在该元素上。

3. 改进方法：使用自定义指令

为了让代码更加灵活和可扩展，我们可以使用自定义指令来实现自动焦点功能。自定义指令可以将 ng-focus 指令打包成一个可复用的组件。以下是一个自定义指令的代码示例：

app.directive('autoFocus', function() {
  return {
    restrict: 'A',
    link: function($scope, element) {
      element[0].focus();
    }
  };
});

这个指令名为 autoFocus，使用时需要像下面这样将它绑定到输入元素上：

<input type="text" auto-focus>

这里我们不需要再写一个 setFocus() 方法，而是直接在指令的 link 方法中使用了 focus() 方法将焦点设置在输入元素上。

结论

总之，我们可以使用 ng-focus 指令、JavaScript 的 focus() 方法以及自定义指令来实现在 AngularJS 中的页面加载时自动将焦点设置在输入字段上的功能。自定义指令的写法更加优雅，让代码更加可复用和可扩展。