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

Question

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.

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'">