Last Updated: February 25, 2016
·
30.38K
· belaezsias

AngularJS: auto focus into input field when ng-show event is triggered

I came across the problem of setting the focus on input field when the field was shown conditionally by ng-show directive of AngularJS. I came up with following custom directive to solve the problem:

app.directive('showFocus', function($timeout) {
  return function(scope, element, attrs) {
    scope.$watch(attrs.showFocus, 
      function (newValue) { 
        $timeout(function() {
            newValue && element.focus();
        });
      },true);
  };    
});

Usage:

<input type="text" ng-show="customcondition" show-focus="customcondition">

2 Responses
Add your response

over 1 year ago ·

Replacing the element with element[0] makes it working.

over 1 year ago ·

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

AngularJS pages are long-lived browser apps with the same script risk as a newer single-page app. Third-party code in the template can read forms and values rendered on the page.

Security insights from Cside