Focus on an element in Angular

Home / Focus on an element in Angular

Earlier today, I helped a colleague on a small issue. That issue was giving focus to an element in a modal once the modal is loaded.

This seems trivial, but it’s actually not entirely straight-forward due to Angular’s digest cycle.

As usual, I wanted to wrap this into a reusable directive.

Here’s what the directive looks like:

var focusOnLoad = function ($timeout) {
    var directive = {
        restrict: 'AC',
        link: function (scope, element) {
            $timeout(function () {
            }, 10, false);  // pass false to avoid $apply / digest cycle
    return directive;

focusOnLoad.$inject = ['$timeout'];
    .directive('focusOnLoad', focusOnLoad);

There is nothing overtly special or complicated about this directive. We simply add it to an element to which we want to have focus on loading of a page/view/modal. The only thing that was tricky is that $timeout has to be used to ensure the digest cycle has run and that the element exists in the DOM. Without the $timeout, the element does not receive focus.

Here’s a working fiddle showing this directing working with a modalDialog:

2 thoughts on “Focus on an element in Angular”

    1. Thanks for pointing that out. I hadn’t even thought about it since I generally use this directive in one-off scenarios. However, since it’s effectively just calling a JavaScript method that has no bearing on the Angular digest, it is completely unncesary to let $timeout $apply anything.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.