When you eventually discover a use case for $compile in Angular directives

How long does it take before you know you have hit the bottom of the rabbit hole ? Are directives in Angular really abysmal ?

When you start directives you simply see all darkness and as you dig miles down into the pile of concepts in angular directives there is frankly no telling as to when would it really end your anxiety. It just keeps convoluting  in a spiral until you sit back and think as to why did the team @Google really need all this ?

Directives are no wonder very powerful concept right  at the gut of Angular. Those are the ones which make angular so awesome. Needless to say journey to the core of earth is not going to be a pleasure trip.

For those first hours, classroom feels like war-room

I know a lot of keen minds who start with great enthusiasm for directives but by the time they hit $watch ( ) or perhaps $apply ( ) / $digest ( ) , $eval( ) it seems to be just too much to comprehend. In fact there is a distinct uneasiness when we start with pre, post and transclusion of directives.

But not all is the onus of the student community. The very fact that by the time $compile ( ) comes in, the tutor too runs out of valid use cases. There is a persistent unanimous question – “Where do you need $compile and is it really useful ?”

$compile is used when you have directives that get configured in their manifestation with other directives.

And and in simple English : When you have any need of injecting directives into other dynamically you would most probably be seeking help of $compile service to get your template compiled with the new injection.

When you seek to do code refactoring and pursue better design , not only would you have independent custom controls, but also bright opportunities to create use cases for all the theory that was elusive till now


The diagram illustrates, to inject directives into another. We need to get that done before the scope for the target directive is attached to one or more expressions. Any directives after the linkage would mean the directives are just dead ducks! Now having realized this, it now remains to find an early spot to inject the directive. (read as: doing the jquery and the DOM template manipulation)

  1. Compile function is the earliest you can get, but then since here you have no access to element (manifestation) just having the template of the directive is of no use
  2. Pre function is good alternative but that means you have to “compile ” the element one more time to read in the directives injected.

Here is what you can certainly do, thanks to the $compile service.

  1. Use the pre function to get the element out, make those changes . Yes! it is no longer the template and that means you would have to do some couple of replacements. Given you have access to Jquery that should be far from being difficult.
  2. Inject the directives dynamically from the “elem”. $eval( ) would NOT be of any use as such is ok when you have expressions to evaluate
  3. Do replacements in the HTML “elem”
  4. Use $compile that feeds on the replacement in the new HTML and supply that the context of the scope.


$compile is exactly what you need. Were you trying to cut some butter with a spoon ? – butter knives are preferable. Whats essentially happening since $compile is at the very gut of angular it then becomes tough to really comprehend as to what could be the possible scenario you would want to use it. As you refactor the code for better / higher design you would end up creating a use case itself where $compile becomes indespensible


One thought on “When you eventually discover a use case for $compile in Angular directives

Add yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: