AngularJS/UI -对话框中的焦点输入

Question

有没有办法使用AngularJS/Angular-UI在输入控件中设置焦点？

我看到Angular-UI有一些Jq-UI=focus指令，但我无法让它工作。

我有几个使用Angular-UI $dialog服务显示的对话框，并且非常希望每个对话框上的第一个输入在显示后获得焦点

Answer 1

我在模板中使用了标准的autofocus属性，并声明了一个简单的指令，以使其适用于在页面加载后创建的元素(如本例中的对话框)。

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

Answer 2

事实证明，如果您将它与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 (单击登录或注册以打开对话框)

Answer 3

您说得对，我已经演示了如何在DOM元素上调用jQuery的原生jQuery.fn.focus()方法，因为这就是ui-jq真正要做的。诀窍是让它在正确的时间多次发射。

ui-jq已经在$timeout中为您执行了该方法，但是默认情况下，它只在创建DOM元素时触发一次。为了让ui-jq多次触发，只需添加ui-refresh="someExpression"并使用一个您知道每次打开模式时都会改变的表达式。如果它在模式关闭时重新触发也没问题，如果DOM元素不可见，.focus()也不会做任何事情。

因此，对于ui-bootstrap模式，只需将您正在使用的相同表达式放入modal="someExpression"中，您就应该设置好了。