Angular 1.x专注于输入字段仅工作一次

Question

I have a search page on a web / mobile app which has an field. When we get on the page, focus must be set on that field so the user can simply just start typing. I have created a directive and linked it to my input field, but it works only once I visit the page with a fresh cache. When you visit the page with a mobile device, the keyboard comes up the first time, and after that, you see it come up and go immediately down after. It seems like the input field has the focus only for half a second. I have tried several answers to this problem, but nothing solved it.

Directive:

app.directive('focusField',function($timeout) {
return {
  link : function($scope,$element,$attr) {
    $scope.$watch($attr.focusField,function(val) {
        $timeout(function() {
            val ? $element[0].focus() :
                $element[0].blur();
        });
    });
  }
}});

HTML:

<input id="search-field" class="form-control" ng-model="searchText" placeholder="Search interviews..." focus-field='true' />

I have also tried to set focus in the controller by using $('#search-field').focus(); but it has the exact same issue.

Any ideas on how I can force the focus on the field every time the user visits?

Thanks in advance!

Answer 1

If the input needs to be focused, why would you need focus-field='false' . If I were you, I would simply remove the $attr , and the $watcher .

link : function($scope,$element) {
    $timeout(function() {
        $element[0].focus();
    }, 0);
};

Then go for

<input focus-field type="search" />