Angularjs：在指令链接中选择和聚焦元素

Question

我正在尝试使用我的自定义指令从一开始就选择并聚焦一个文本输入字段。

输入字段：

<input type="text" value="Preset Value" select-on-load />

自定义指令：

app.directive('selectOnLoad', function () {
// Linker function
return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        element.focus().select();
    }
};

});

但我只收到一个 javscript 错误，说焦点/选择不是一个函数。 我应该怎么做呢？

Answer 1

Angular 的 jqLit​​e（jQuery 的内置轻量版）不支持.focus()。

您需要获取实际的 DOM 元素并使用 Javascript 的内置 .focus()

element[0].focus()

（element[0] 从 jqLit​​e 包装器 element 获取 DOM 元素对象）

使用.select()，如果您尝试选择来自ng-model 的文本，则有点棘手，因为在link 函数运行时，ng-model 的值尚未被插值并插入到 DOM 中。

您需要等到摘要周期结束，而我看到的常用方法是通过$timeout：

$timeout(function(){
  element[0].select();
});