Call function after directive has been fully compiled / rendered

Question

(Forgive me if I'm getting some of the terminology wrong; I'm new to Angular.)

I have a directive that looks something like this:

return {
    template: "<p>{{size}}</p><div ng-transclude></div>",
    link: function(scope, element) {
        scope.size = element.outerWidth();
    }
};    

I want this setting of scope.size to take effect after the ng-transclude has been resolved. However, when the link function is called, this is not the case. Is there some way to run code after ng-transclude subs in its content? Do I have to listen to load events in the DOM?

Answer 1

$timeout() puts work on the native event queue, and hence it will be serviced after the browser renders. So try this:

return {
    transclude: true,
    template: "<p>{{size}}</p><div ng-transclude></div>",
    link: function(scope, element) {
        //scope.size = element.outerWidth();
        $timeout(function() {
            scope.size = element.outerWidth();
        },0)

    }
};