AngularJS/UI - вход фокуса в диалогах

Есть ли способ установить фокус в элементах управления вводами, используя AngularJS/ Angular -UI?

Я видел, что Angular -UI имеет некоторую директиву Jq-UI = focus, но я не могу заставить его работать.

У меня есть несколько диалогов, которые я показываю с помощью диалогового окна Angular -UI $, и мне бы очень хотелось, чтобы первый ввод в каждом диалоговом окне получал фокус, когда он показывался

ОТВЕТЫ

Ответ 1

Я использовал стандартный атрибут autofocus в своем шаблоне и объявил простую директиву, чтобы он работал для элементов, созданных после загрузки страницы (например, в вашем диалоговом окне).

app.directive('autofocus', function () {
  return {
    restrict: 'A',
    link: function (scope, element) {
      element[0].focus();
    }
  };
});

Ответ 2

Оказывается, все, что вам нужно, это если вы используете его вместе с диалоговым окном Angular -ui $:

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 $.

Смотрите здесь здесь: http://strengthtracker.apphb.com (нажмите логин или зарегистрируйтесь, чтобы открыть диалоги)

Ответ 3

Вы правы, я показал демонстрации о том, как вы можете вызвать собственный метод jQuery.fn.focus() jQuery для элемента DOM, как это делает все ui-jq. Трюк запускает его несколько раз и в нужное время.

ui-jq уже выполняет метод для вас внутри $timeout, однако по умолчанию он запускается только один раз, когда создается элемент DOM. Чтобы сделать ui-jq огонь несколько раз, просто добавьте ui-refresh="someExpression" и используйте выражение, которое, как вы знаете, будет меняться каждый раз, когда модальный открывается. Это нормально, если он обновляется, когда модальная функция тоже закрыта, .focus() ничего не сделает, если элемент DOM не отображается.

Итак, для ui-bootstrap modal просто поместите то же выражение, которое вы используете внутри modal="someExpression", и вы должны быть установлены.