Focus function is not working in angular

Question

Simple focus is not working in angular

<div class="search pull-right tab-{{ showDetails2 }}" data-ng-click="showDetails2 = !showDetails2; showDetails = false; showDetails1 = false;searchFocus();">

html

<input type="text" data-ng-model="model.fedSearchTerm"
                    placeholder="New Search" required class="span12 fedsearch-box" />

MY function

$scope.searchFocus = function() {
            $('.fedsearch-box').focus();
        };

http://stackoverflow.com/questions/14833326/how-to-set-focus-in-angularjs look at Mark's answer here. — metalfight - user868766, Aug 30 '13 at 07:27

score 15 · Answer 1 · answered Oct 27 '14 at 04:29

15

I encountered the same issue. Solved it by enclosing the focus command inside $timeout. Make sure you pass the $timeout parameter in the .controller function.

$timeout(function() { $('.fedsearch-box').focus(); });

answered Oct 27 '14 at 04:29

Jason Jan Ngo

189
1
6

score 11 · Accepted Answer · answered Aug 30 '13 at 08:13

11

Here is a more robust implementation that works very well :

myApp.directive('focusMe', function () {
    return {
        link: function(scope, element, attrs) {
            scope.$watch(attrs.focusMe, function(value) {
                if(value === true) {
                    element[0].focus();
                    element[0].select();
                }
            });
        }
    };
});


<input type="text" ng-model="stuff.name" focus-me="true" />

answered Aug 30 '13 at 08:13

bdavidxyz

2,492
1
20
40

1

This does work very well. Could you explain why the $watch is required to wrap the focus and select? I tried removing $watch and of course it doesn't work without it. – Markus Pint Aug 12 '15 at 12:17

score 1 · Answer 3 · answered Aug 30 '13 at 07:29

You could write a directive for this purpose like;

myApp.directive('focus', function () {
  return function (scope, element, attrs) {
           element.focus();
  }
});

And in your HTML;

<input type="text" data-ng-model="model.fedSearchTerm"
                    placeholder="New Search" required focus />

Focus function is not working in angular

3 Answers3