Teaching HTML New Tricks

OVERVIEW

AngularJS directives are what controls the rendering of the HTML inside an AngularJS application.   This is what AngularJS refers to as "teaching HTML new tricks".

Directive Types

You can implement the following types of directives:

• "E" Element directives
• "A" Attribute directives
• "C" CSS class directives
• Comment directives

The template and templateUrl Properties

You can put that HTML inside the template attribute of the directive definition object.  But in case that HTML template grows big, it is gets hard to write and maintain the HTML inside a JavaScript string. You can then put the HTML into its own file and have AngularJS load it from that file. You do so by putting the URL of the HTML template file into the templateUrl property of the directive definition object. Here is an example:

Isolating Scope in Directive.

To be able to bind the two elements to different values in the $scope object, you need to bind the HTML template to an isolate scope.

compile() and link() Functions

The compile() and link() functions define how the directive is to modify the HTML that matched the directive.
When the directive is first compiled by AngularJS (first found in the HTML), the compile() function is called. The compile() function can then do any one-time configuration of the element needed.
The compile() function finishes by returning the link() function. The link() function is called every time the element is to be bound to data in the $scope object.

Setting Only a link() Function

Sometimes you do not need the compile() step for your directive. You only need th link() function. In that case you can set the link() function directly on the directive definition object.

Directives Which Wraps Elements Via Transclusion

<mytransclude>This is a transcluded directive {{firstName}}</mytransclude>

The directive is marked by the element. But the content inside it is set by the developer. Thus, this part of the HTML should not be replaced by the directive's HTML template. We actually want that part of the HTML to be processed by AngularJS. This processing is called "transclusion".
In order to make AngularJS process the HTML inside a directive, you have to set the transclude property of the directive definition object to true.