AngularJS Autofocus directive

autofocus.js

/**
 * the HTML5 autofocus property can be finicky when it comes to dynamically loaded
 * templates and such with AngularJS. Use this simple directive to
 * tame this beast once and for all.
 *
 * Usage:
 * <input type="text" autofocus>
 * 
 * License: MIT
 */
angular.module('utils.autofocus', [])

.directive('autofocus', ['$timeout', function($timeout) {
  return {
    restrict: 'A',
    link : function($scope, $element) {
      $timeout(function() {
        $element[0].focus();
      });
    }
  }
}]);

It's MIT Licensed

Hey ... just found this after writing my own solution ...

angular.module('finnApp')
  .directive('angularAutoFocus', function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        element.focus();
      }
    };
  });

any chance you can explain why you are using element[0] ... instead of just element. Also reasoning for the $timeout .. would prefer to not have it if it is not necessary.

for context I have only tired this on inputs while using uirouter and running into wonkyness with html5 autofocus

@BenjaminConant: .focus() (without [0]) only works when you have jQuery loaded. The $timeout is required because at execution time, the element may not be present in the DOM yet.

thanks 👍

@blaise-io thanks much!

Great, thank you

This directive was working great with an earlier version of Angular 1.4, but I recently upgraded to Angular 1.4.10, and started getting this error: Uncaught TypeError: $exceptionHandler is not a function. The solution was to inject $exceptionHandler in addition to $timeout into the directive. I believe this is because $timeout delegates any exceptions that occur within the function to the $exceptionHandler.

See: https://docs.angularjs.org/api/ng/service/$timeout

Like a boss!

awesome

The $timeout to the rescue!!!

awesome

Thanks!

wonderful, thank you sir

how to add autofocus conditionally? so if expression is true add "autofocus" attribute.