What are compile & link options in Custom directives?

What are compile & link options in Custom directives?

Understanding the compile vs. link option is one of the more advanced topics across Angular, and it gives us a feel how actually Angular works. Out of both the functions, link function is used very often. Basically, both are mutually exclusive, i.e., if both the options are set, then compile will overwrite the link functions defined. The concept of compile and link comes from C language, where you first compile the code and then link it to actually execute it. The process is very much similar in AngularJS as well.
Compile: It traverses the DOM and collects all of the directives and deals with transforming the template DOM. The result is a linking function.
Link: The link function deals with linking scope to the DOM.

Using Code for Compile

While defining a custom directive, we have the option to define a link against which either we can define a function or we have the option to assign an object which will have pre & post functions.
If compile is defined as defined below, then it will override the link function as shown in the below example:

Using Code for Pre & Post Link

While defining a custom directive, we have the option called “link” against which either we can define a single function or we have the option to assign an object in which we can define further two functions, i.e., Pre-link and Post-link functions.
If only a single function is defined against link option, that will be the same as Post link function.
Both Pre & Post link functions have the same syntax as defined below but the only difference is the order in which they get executed.

Link Example

In the above example, we are defining a function against link option which will get executed before linking scope and the template.

Pre & Post Functions Examples

Defining only Post

Defining post is the same as the link option defined with a normal function as defined in above link example.

Defining Pre & Post

The signature of the pre-link function is the same as that of a post-link. The only difference between the pre-link and a post-link is the order in which they get executed.

In the above example, there is a directive defined with name parentDir1 which has a child directive called child1 and both are defined using post / link functions due to which the output shows that scope of parent is unable to be accessed in child scope due to which name of parent is printed as undefined.
And to this problem, the solution is Pre-link function which is shown in the above example with parentDir2 which is having child directive called child2 and parent is defined with pre-link function and child is defined with post link function.
Below is the output of the above example: