javascript - 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 错误，指出 focus/select 不是一个函数。我还应该怎么做？

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();
});