How to handle DOM updates in AngularJS Directives in "link"

AngularJS directives are great. They provide a really wonderful mechnism "to teach HTML new tricks". But apparently there is no predefined mechanism for doing your DOM manipulation after the template has been loaded, cloned and transformed and rendered. Today I found a workaround for that.

var myModule = angular.module(myModule', []);
    myModule.directive('myDirective', function () {
        return {
            templateUrl: 'partials/timeline.html',
            link: function postLink(elem, attrs, transclude) {
                    // This code will run after
                    // templateUrl has been loaded and cloned
            }
        };
    );

The problem is divided in two steps, that must be handled each: The function "link" is called after the template has been cloned. This does not include any DOM manipulations that happen after this cloning, triggered by directives ng-repeat or ng-view. If you want to start your DOM manipulation after these directives have been handled by AngularJS (i.e. the DOM has been manipulated), you will need a setTimeout, or better the $timeout function from AngularJS.

So now you will get this code.

var myModule = angular.module(myModule', []);
    myModule.directive('myDirective', function ($timeout) {
        return {
            templateUrl: 'partials/timeline.html',
            link: function postLink(elem, attrs, transclude) {
                $timeout(function () {
                    // This code will run after
                    // templateUrl has been loaded, cloned
                    // and transformed by directives.
                }, 0);
            }
        };
    );

Yeah, that's better. But wait, we're not done yet. What if you want you want to do transformations of the DOM based on the positions of the newly rendered elements? Getting the position, offset, height, width of the newly created elements are not guaranteed to provide the correct values, because the browser had not enough time to render and layout those elements. The hack is to further delay these operations.

var myModule = angular.module(myModule', []);
    myModule.directive('myDirective', function ($timeout) {
        return {
            templateUrl: 'partials/timeline.html',
            link: function postLink(elem, attrs, transclude) {
                $timeout(function () {
                    $timeout(function () {
                        // This code will run after
                        // templateUrl has been loaded, cloned
                        // and transformed by directives.
                        // and properly rendered by the browser
                    }, 0);
                }, 0);
            }
        };
    );

If you wonder, why a timeout of 0 really helps, here's a great explanation by John Resig.