Skip to content

AngularJS - After Render Directive

Do you ever wanted to execute code after your Angular template is completely rendered?

This post is the answer of how you can accomplish that.

This a simple tip, but I believe that can be really useful.

Add the following directive to your application.

myApp.directive("afterRender", [
function ($timeout) {
var def = {
restrict: "A",
terminal: true,
transclude: false,
link: function (scope, element, attrs) {
$timeout(scope.$eval(attrs.afterRender), 0); //Calling a scoped method
return def;

Now, add the after-render directive to an element in your template:

<div after-render="missionCompled"></div>

At this point, your application will run the missionCompled function (or other that you want) in your controller, after the div is rendered.

You can see the working demo on JSFiddle.

I hope that this helps you.