Input autofocus attribute

Question

I have places in my code where I have this:

I would like to be able to use it like

Answer 1

I did it with two custom directives, something like this:

(function(angular) {
  'use strict';

  /* @ngInject */
  function myAutoFocus($timeout) {
    return {
      restrict: 'A',
      link: function(scope, element) {
        $timeout(function() {
          element[0].focus();
        }, 300);
      }
    };
  }

  function myFocusable() {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        var focusMethodName = attrs.myFocusable;
        scope[focusMethodName] = function() {
          element[0].focus();
        };
      }
    };
  }

  angular
    .module('myFocusUtils', [])
    .directive('myAutoFocus', myAutoFocus)
    .directive('myFocusable', myFocusable);

}(angular));

If you add attribute my-auto-focus to an element, it will receive focus after 300ms. I set the value to 300 instead of 0 to let other async components to load before setting the focus.

The attribute my-focusable will create a function in the current scope. This function will set focus to the element when called. As it creates something in the scope, be cautious to avoid overriding something.

This way you don't need to add something to Angular's digest cycle (watch) and can do it entirely in the view:

        
Click to focus

I created a JSFiddle to show the myFocusable directive: http://jsfiddle.net/8shLj3jc/

For some reason I don't know, the myAutoFocus directive does not work in JSFiddle, but it works in my page.