11

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

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

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

4

4 回答 4

19

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

app.directive('autofocus', function () {
  return {
    restrict: 'A',
    link: function (scope, element) {
      element[0].focus();
    }
  };
});
于 2014-03-17T17:39:55.210 回答
10

事实证明，如果您将它与 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 （单击登录或注册以显示对话框）

于 2013-07-09T14:33:48.053 回答
0

你是对的，我已经展示了如何jQuery.fn.focus()在 DOM 元素上调用 jQuery 的本机方法的演示，因为这就是全部ui-jq。诀窍是让它在正确的时间多次触发。

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

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

于 2013-07-08T10:05:03.673 回答
-5

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

于 2013-07-08T09:38:02.410 回答