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();
      });
    }
  }
}]);

Thanks!.

👍

what if $timeout have not controll time it will be?

https://gist.github.com/kirkstrobeck/599664399dbc23968741

• Added use strict in self executing function
• Enforced 80 char line limit
• Adheres to webmaker jsbeautify
• Tabs converted to spaces
• Added missing semi-colon
• Added global for airbnb jshint
• Enforced consistent spacing

Any chance you could explicitly license this under an open source license or mark it as public domain?

Thanks

Thanks its working fine..

Since the callback is purely DOM related, there is no need to trigger digest cycle after the input is focussed. So, passing third argument (invokeApply) to $timeout() as false would be a better approach imo.

thanks

Very clean and cool 👍

The lack of an open source license prohibits me from using this. Licensing this under the MIT license (the same license as AngularJS is licensed under) would be great.

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.