By Danial Lokman, March 20, 2015

Dynamically Compile and Add a custom directive in AngularJs

If you are like any other angularjs developer working on single page web apps(SPA), there may come a time when you need to compile and add a custom directive on the fly to a html page. In this tutorial, thats exactly what we'll focus on.

Lets say for instance you have the following custom directive defined:

And lets say you have the following static html. Div with Id- 'injectDirectiveIntoThisDiv' is where you want to inject the HTML output of the custom directive after compiling it.

StaticHTML.html Before

Here's how to dynamically compile and add the custom directive to the static html page from js page of static html

StaticHTML.js //Controller for HTML File

StaticHTML.html After dynamic directive is compiled and added to it

As you can see from above, the div 'injectDirectiveIntoThisDiv' has been injected html produced by compiling the directive on the fly using scope data and setting it via Jquery.

Some notes to take

The $compile service compiles the fragment of HTML "<div customdirective></div>" that includes the directive("customdirective") and produces a function. Then this function is invoked with a scope to get the "HTML output FROM the directive". Lastly, via Jquery, the HTML output generated from the directive is injected into the static HTML page.

Additional Reference/Related Article 1: Dynamically Add Directive In Angularjs
Additional Reference/Related Article 2: Custom directives