AngularJS / UI - 在对话框中聚焦输入

Is there any way to set focus in input controls using AngularJS/Angular-UI ?

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

I saw that Angular-UI has some Jq-UI=focus directive but I'm unable to get it to work.

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

I have a few dialogs that I display using Angular-UI $dialog service and would really like the first input on each dialog to get focus once it's shown

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

4 个解决方案

#1

I used the standard autofocus attribute in my template, and declared a simple directive to make it work for elements that are created after page load (like dialogs in your case).

我在模板中使用了标准的autofocus属性，并声明了一个简单的指令，使其适用于在页面加载后创建的元素（如您的情况下的对话框）。

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

#2

Turns out that all you need is this if you use it together with the Angular-ui $dialog service:

事实证明，如果你将它与Angular-ui $对话框服务一起使用，你需要的就是这个：

app.directive('focusMe', function ($timeout) {    
    return {    
        link: function (scope, element, attrs, model) {                
            $timeout(function () {
                element[0].focus();
            });
        }
    };
});

html:

HTML：

  <input type="text" focus-me >

as stated, this is for Angular-UI $dialog service only.

如上所述，这仅适用于Angular-UI $对话服务。

See it live here: http://strengthtracker.apphb.com (click login or register to bring up the dialogs)

在这里看到它：http：//strengthtracker.apphb.com（点击登录或注册以显示对话框）

#3

You are right, I've shown demos on how you can call jQuery's native jQuery.fn.focus() method on a DOM element, as that's all ui-jq really does. The trick is getting it to fire multiple times, and at the right time.

你是对的，我已经展示了如何在DOM元素上调用jQuery的原生jQuery.fn.focus（）方法，因为这就是ui-jq所做的一切。诀窍是让它在适当的时间点火多次。

ui-jq already executes the method for you inside a $timeout, however by default it only fires once, when the DOM element is created. In order to make ui-jq fire multiple times, simply add ui-refresh="someExpression" and use an expression that you know will change every single time the modal opens. It's alright if it refires when the modal is closed too, .focus() will do nothing if the DOM element is not visible.

ui-jq已经在$ timeout内为你执行了这个方法，但是默认情况下它只会在创建DOM元素时触发一次。为了使ui-jq多次激活，只需添加ui-refresh =“someExpression”并使用你知道每次模态打开时都会改变的表达式。如果在模态关闭的情况下它也会重新启动，如果DOM元素不可见，则.focus（）将不执行任何操作。

So, for the ui-bootstrap modal, simply put the same expression you're using inside the modal="someExpression" and you should be set.

所以，对于ui-bootstrap模式，只需在modal =“someExpression”中放置你正在使用的相同表达式，就应该设置它。

#4

-5

The last version of AngularJS offers ng-focus : http://docs.angularjs.org/api/ng/directive/ngFocus

AngularJS的最新版本提供了ng-焦点：http：//docs.angularjs.org/api/ng/directive/ngFocus

#1