Angular 路线/输入自动对焦

Question

我正在使用 angular 路线。每个页面（路线）都有一个输入字段。我已经成功地在第一页上使用了属性 autofocus。当我导航到其他页面时，输入不会自动对焦。返回第一页不会再次自动聚焦输入。我现在明白为什么它不起作用，但想知道是否有办法实现这一点。

我是 Angular 的新手，我不确定我是否理解我读到的有关 ngFocus 的内容：

https://docs.angularjs.org/api/ng/directive/ngFocus

Answer 1

ngFocus 不是您要找的。该指令更像是一个事件触发器。只要用户将焦点放在文本框上，它就会执行您的代码。

你想要的是像这样的自定义指令：

angular
    .module('myApp')
    .directive('autofocus', function($timeout) {
        return {
            link: function(scope, element, attrs) {
                $timeout(function() {
                    element.focus();
                });
            }
        }
    });

灵感来自 http://ericclemmons.com/angular/angular-autofocus-directive/

Answer 2

就我而言，Travis Collins 的回答不起作用，因为不知何故，该元素是一个输入数组。

所以我必须使用稍微修改过的版本。注意，带箭头功能。

.directive('autofocus', ($timeout) => ({
    link: (scope, element: any, attrs) => {
        if (!element.focus && element.length) {
            element = element[0];
        }
        $timeout(() => {
            element.focus();
        });
    }
}));

Angular 路线/输入自动对焦

Angular Routes / input autofocus

javascript

routes

input

autofocus

angularjs