Description
To extend the HTML DOM elements functionality, AngularJS custom directives are used. These are characterized using the "directive" function. The rendition of HTML in an AngularJS application is controlled by AngularJS directives. This phenomena is popularly known as "teaching HTML new tricks". Here is an example of AngularJS Custom Directives:
[html]
<customer name="Smith"></customer><br/>
<mobile name="Samsung"></mobile>
[/html]
Interpolation directive {{ }},
ng-if directive and the ng-repeat directive are some of the examples of directives. For which custom directive is activated it replaces the element. While bootstrapping, AngularJS application searches for the matching elements and complies using compile() method of the custom directive and then uses link() method to process the element. The chapter explains when to create custom directives and how to execute them.
Description
Following directives can be implemented:
- Attribute directives
- Element directives
- Comment directives
- CSS class directives
Directives
| Directive Type | Description |
|---|---|
| Element directive | At the point when AngularJS finds a coordinating HTML element in the HTML template, Element directive is enacted. |
| Attribute directive | Attribute directive gets enacted when AngularJS finds a coordinating HTML element attribute. |
| CSS class directive | CSS class directive gets enacted when AngularJS finds a coordinating CSS Class. |
| Comment directive | This directive gets enacted when AngularJS finds a coordinating HTML comment. |
Examples
This example shows how to register a directive with a module.
[javascript]
myapp = angular.module("spApp", []);
myapp.directive('customer', function() {
var directive = {};
directive.restrict = 'E'; /* restrict this directive to elements */
directive.template = "Name: {{Smith}}";
return directive;
});
[/javascript]
Register a new directive by calling
directive() function. The initial parameter of the function call to the directive() is the directive name to register. This is the name which is needed to use in HTML templates whenever there is a need to activate that directive.
In the above example, customer is used as a name i.e. this directive is activated as an HTML element with name customer in the HTML template.
The factory function is the second parameter of the directive function passed. A directive definition has to be returned by this function whenever requested. To get a JavaScript object that contains the definition of the directive, AngularJS will request this function.
In the above example, a JavaScript object is used inside the function . Description
Factory function returned by JavaScript object has two properties: A field
template and restrict field.
The restrict field helps in checking whether the directive has to be activated by matching HTML element or by an element attribute.
- Setting restrict to
EIt tells only HTML elements which are named ascustomermust activate the directive. - Setting restrict to
AIt tells only HTML attributes which are named ascustomermust activate the directive. - Value of
AEcan also be used to match both HTML element names and attribute names.
customer element content is a template field. It works when the matched customer element content is not found and instead, this HTML template was located in the similar place. Examples
Assume that below HTML page has this HTML:
[html]
<div ng-controller="SPController" >
<customer>This div will be replaced</customer>
</div>
[/html]
At the moment when AngularJS finds the inner
div element, the activation of added directive will take place. In place of the div element, the HTML will be inserted:
[html]
Name: Smith
[/html]
Description
- The
compile()andlink()functions help in performing advanced operation inside the directive created. - The
compile()andlink()functions characterizes the way of modification if directive in the HTML document matches the directive. - The
compile()function is called once for each occurrence of the directive in the HTML page. Thecompile()function can then do any one-time configuration required by the element containing the directive. - The
compile()function completes its task by returning thelink()function. In this process, link() is called each time whenever the element has to bound to data in the$scopeobject. - As discussed,
compile()function can be summed up with the directive definition object, andlink()function is returned by thecompile()function when executed.
Key Points
- AngularJS application searches for matching elements and complies using compile() method of the custom directive and then uses link() method to process the element.
- The restrict field helps in checking whether the directive has to be activated by matching HTML element or by an element attribute.
- A HTML template that replaces the matched element content is a template field.