Есть ли способ установить фокус в элементах управления вводом с помощью AngularJS/Angular-UI?
Я видел, что в Angular-UI есть директива Jq-UI=focus, но я не могу заставить ее работать.
У меня есть несколько диалогов, которые я отображаю с помощью службы Angular-UI $dialog, и мне бы очень хотелось, чтобы первый ввод в каждом диалоговом окне получил фокус после его отображения.
Я использовал стандартный атрибут autofocus в своем шаблоне и объявил простую директиву, чтобы он работал для элементов, которые создаются после загрузки страницы (например, диалоги в вашем случае).
app.directive('autofocus', function () {
return {
restrict: 'A',
link: function (scope, element) {
element[0].focus();
}
};
});
Оказывается, все, что вам нужно, это если вы используете его вместе с сервисом Angular-ui $dialog:
app.directive('focusMe', function ($timeout) {
return {
link: function (scope, element, attrs, model) {
$timeout(function () {
element[0].focus();
});
}
};
});
HTML:
<input type="text" focus-me >
как указано, это только для службы Angular-UI $dialog.
Смотрите его здесь: http://strengthtracker.apphb.com (нажмите "Войти" или "Зарегистрироваться", чтобы открыть диалоговые окна)
$modal в Angular, в который $dialog был преобразован в более поздних версиях пользовательского интерфейса Angular. 21.07.2015 Вы правы, я показал демонстрацию того, как вы можете вызвать собственный метод jQuery jQuery.fn.focus() для элемента DOM, поскольку это все, что ui-jq действительно делает. Хитрость заключается в том, чтобы заставить его стрелять несколько раз и в нужное время.
ui-jq уже выполняет метод для вас внутри $timeout, однако по умолчанию он срабатывает только один раз, когда создается элемент DOM. Чтобы ui-jq срабатывало несколько раз, просто добавьте ui-refresh="someExpression" и используйте выражение, которое, как вы знаете, будет меняться каждый раз при открытии модального окна. Ничего страшного, если он перезапустится и при закрытии модального окна, .focus() ничего не сделает, если элемент DOM не виден.
Итак, для модального окна ui-bootstrap просто поместите то же выражение, которое вы используете, внутри modal="someExpression", и вы должны быть установлены.
Последняя версия AngularJS предлагает ng-focus: http://docs.angularjs.org/api/ng/directive/ngFocus
restrict: 'A'? 04.11.2016