Question

我试图用AngularJS聚焦输入框。为了实现这一点，我创建了一个自定义指令，但由于某些原因，它不能在特定的输入框上工作。

这是我的重点＆＃39;指令：

angular.module('app.ui.input').directive('ooFocus', function()
{
    return {
        scope : {
            trigger : '=ooFocus'
        },
        restrict : 'A',
        link : function(scope, element, attrs)
        {
            scope.$watch('trigger', function(value)
            {
                if(value)
                {
                    console.log('this will be printed');
                    element[0].focus();
                    element[0].select();
                }
            });
        }
    }
});

这就是它应用于输入框时的样子：

<input placeholder="Company name" type="text" ng-model="company.name" ng-blur="hide()" oo-focus="show" required>

包含输入框的表单将被隐藏，并在show设置为true时显示。 show被传递给oo-focus指令，我可以看到，当this will be printed设置为true时，指令在控制台中打印show，但由于某些原因，输入是没有集中注意力。

Answer 1

你无法专注于隐藏的东西，它就像那样简单。因此，在尝试对焦之前，您必须确保显示input。

问题在于，通常您不直接使用css，这会立即显示该元素。通常您使用的是ng-show或ng-if等指令，您甚至无法确定它们是否在ooFocus之前进行了评估。

使用$timeout来延迟焦点是这种情况的一个很好的解决方案。

Answer 2

我有一个解决这个问题的方法。尝试在这样的指令中使用$ timeout，

.directive('ooFocus',function($timeout) {
return {
    scope : {
        trigger : '=ooFocus'
    },
    restrict : 'A',
    link : function(scope, element) {

        scope.$watch('trigger', function(value) {
          if (value) {
            $timeout(function() {
                element[0].focus();
            });
          }
        });
    }
};

}）;

无法将注意力集中在AngularJS中

2 个答案: