AngularJS: callback after render (work with DOM after render)

Question

AngularJS: callback after render (work with DOM after render)

How can run a method $scope.myWork() after render template? I want to set the $scope.value and after that I need to change something with JQuery (eg. in DOM of template content). $scope.$watch('value', function (){....}) is working "before" render (DOM of template is not available yet). Thanks.

angularjs

Answer 1

Create a directive that runs your code in the link function. The link function is called after the template is built.

See ng-click to get an idea.

Answer 2

I use terminal and transclude in a attribute directive to call a scoped method after a model is updated and view is rendered (in my case to resize a iframe after a $Resource.query):

.directive('postRender', [ '$timeout', function($timeout) {
var def = {
    restrict : 'A', 
    terminal : true,
    transclude : true,
    link : function(scope, element, attrs) {
        $timeout(scope.resize, 0);  //Calling a scoped method
    }
};
return def;
}])

The $timeout is black magic. It should be possible to declare the JS method as the attribute value and $parse it.

So I use it in a ng-repeat (in my case a tree is rendered recursively):

<div post-render ng-repeat="r in regions | orderBy:'name'" ng-include="'tree_region_renderer.html'">

Answer 3

Jens answer above will work , but note that on newer AngularJS versions (for example 1.2.3) you cannot have that postRender directive in combination with ng-repeat as attributes on the same tag since they both have transclude: true. In that case you either must remove transclude or have a separate tag with the postRender directive attribute.
Also be aware of priority of attributes when using terminal: true since you might end up having an attribute non- effective due to a higher priorotized one on the same tag.