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

Угловой jqLite (встроенная легкая версия jQuery) не поддерживает .focus().

Вы должны будете получить фактический DOM элемент и использовать Javascript встроенный .focus()

element[0].focus() 

(element[0] получает объект элемента DOM из jqLite обертки element)

С .select() оно немного сложнее, если вы пытаетесь выбрать текст, который приходит через ng-model, потому что к моменту выполнения функции link значение ng-model еще не было интерполировано и не вставлено в DOM.

Вы должны были бы ждать до конца цикла дайджеста, и общим, как я видел это делается это с помощью $timeout:

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