Javascript AngularJS指令在输入字段中聚焦：为什么需要调用setTimeout才能使其工作？

我已经定义了一个angularjs指令，它的目的是自动触发对

输入

HTML元素的关注

该指令的代码如下所示：

function autoFocus() {
    return {
        restrict: 'A',
        scope: false,
        link: function ($scope, $element, $attrs) {
            $scope.$watch($attrs.autoFocus, function(newValue, oldValue) {
                if (!newValue) {
                    return;
                }

                const element = $element[0];
                setTimeout(function() {
                    element.focus();
                }, 0);
            });
        }
    };
}

angular
    .module('app')
    .directive('autoFocus', autoFocus);

这是一个用法示例：

<input 
      ng-show="isEditMode" 
      ng-model="item.title"
      ng-blur="todo.updateTodo(item, $index); isEditMode = false;"
      auto-focus="isEditMode">

如果我从回调代码中删除对

setTimeout

的调用，则指令不会按预期工作（焦点事件不会按预期触发）

---

有人能解释一下为什么需要调用

setTimeout

才能使其工作吗？

这是一个常见的指令问题，

link

函数在DOM完成渲染之前运行，因此

元素还没有值。最简单（可能也是最干净）的解决方案是使用
$timeout
，它触发一个新的摘要周期并确保DOM已呈现

（您应该将
setTimeout
替换为angular的
$timeout
服务）
这是一个常见的指令问题，
link
函数在DOM完成渲染之前运行，因此
元素
还没有值。最简单（可能也是最干净）的解决方案是使用
$timeout
，它触发一个新的摘要周期并确保DOM已呈现

（您应该将
setTimeout
替换为angular的
$timeout
服务）
谢谢。我缺少的一点是，link函数在DOM完成渲染之前运行。因此，基本上，当执行回调函数时，
元素
对象作为DOM元素存在（作为javascript对象，它实际上是被定义的），但它还没有被呈现，对吗？这不是
链接
函数的默认行为。它通常发生在指令元素需要一些时间来呈现时（用于html的templateUrl或使用
ng repeat
etc）。我缺少的一点是，link函数在DOM完成渲染之前运行。因此，基本上，当执行回调函数时，
元素
对象作为DOM元素存在（作为javascript对象，它实际上是被定义的），但它还没有被呈现，对吗？这不是
链接
函数的默认行为。它通常发生在指令元素需要一段时间才能呈现时（使用用于html的templateUrl或
ng repeat
etc）