ng-focus-if

An attribute directive that will trigger focus on an element under specified conditions. It can also be used as a cross-browser replacement for the autofocus attribute.

View a live demo on Plnkr.

It is available through NPM:

npm install ng-focus-if

Or, via bower:

bower install ng-focus-if --save

Usage

Include focusIf.min.js in your build or directly with a <script> tag and require the module in your module definition:

angular  
    .module('App', [  
        'focus-if',  
        ... // other dependencies  
    ]);

To immediately focus an element upon rendering (similar to input autofocus):

<input focus-if />

To focus an element when a specified Angular expression becomes truthy:

<input focus-if="focusInput" />

To focus an element after a specified delay upon rendering:

<input focus-if focus-delay="500" />

To focus an element after a specified delay when a specified Angular expression becomes truthy:

<input focus-if="focusInput" focus-delay="500" />

Caveat: apply focus multiple times

Like any other Angular directive using a $watch callback, this directive depends on Angular's model change detection, which can cause trouble when trying to apply focus more than once. Users looking to apply focus to a given element multiple times may find this thread useful.