AngularJS directive that will trigger focus on an element under specified conditions
Clone or download
hiebj Update README.md
add "truthy" link
Latest commit 803bc0e Oct 6, 2016
Permalink
Failed to load latest commit information.
.gitignore Initial commit Feb 19, 2015
LICENSE minor code changes, added license Feb 26, 2015
README.md Update README.md Oct 6, 2016
bower.json
focusIf.js add $inject declaration Nov 14, 2015
focusIf.min.js rename directive from 'autofocus' to 'focus-if' Jun 9, 2015
focusIf.spec.js rename directive from 'autofocus' to 'focus-if' Jun 9, 2015
gulpfile.js rename directive from 'autofocus' to 'focus-if' Jun 9, 2015
index.js Added support for CommonJS. Mar 5, 2016
karma.conf.js updated dependencies and added unit test coverage reporter Aug 3, 2015
package.json 1.0.7 Jun 24, 2016

README.md

ng-focus-if

Bower version NPM version Downloads devDependency Status GitHub stars

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.