I can say directives are like a plugin to DOM elements which identified by AngularJS HTML compiler to render. AngularJS comes with many in-built directives to enrich our HTML. For better programmer friendly environment AngularJS provides the facility to write your own Angular Custom Directive. Directive gives freedom to write more structural UI controls. It’s easy to use & effective to maintain. There are 4 types of directive introduced by AngularJS.
- Element directives (E)
- Attribute directives (A)
- CSS class directives (C)
- Comment directives (M)
Using restrict option in a directive we can prevent it to any type. Name of a directive is case sensitive. Generally we use camel Case to present a directive name. Let’s take an example of ngTable. While embedding a directive in HTML typically we do lower case dash-delimited attribute on DOM elements. In case of ngTable directive while we will use this with HTML we can go for ng-table.
To make you clear about the full features of a directive let us discuss the available options. To create a directive we need to create a module first. Inside that module using directive keyword we can create our own custom directive. Directive is nothing but a function with return value.
Angular Custom Directive Example
var myApp = angular.module('myApp',[]);
myApp.directive('myDir', function() {
return {
template: 'Name: Biswabhusan Address: Nandanvan Colony, Wakad.'
};
});
Template & TemplateURL
Template & TemplateURL both are responsible to present HTML in a directive. Using Template option we can pass pure HTML to a directive when TemplateURL accepts only the physical path of the HTML page. While designing a large template TemplateURL helps to divide HTMLs into segments. This approach to advanced UI designing helpful to maintain & debug templates easily.
Restrict option
Using restrict option in a directive we can prevent the way to embed that directive in HTML. If we want to restrict a directive to attributes we have to use restrict: A. Like the same for Elements & CSS Classes we can use E & C. In case we required multiple restrictions to a directive we can use AEC.
Scope inside a Directive
Scope inside a directive gives freedom to accept out parameters from the shape of attributes. For an example let we plan to create a tab control. What I want is when I will declare my-tab directive in HTML I need to pass length as another attribute which will control the number of tabs. Here value of length is a number. To fetch this number from length attribute using scope we can declare “length”:’=’. In-case we are looking to fetch data in the shape of JSON we need to declare “data”: ‘@’. Using scope.$watch we can find out the value of an attribute in a directive.
Link in a Directive
Link is a function in a directive. After major parameters like scope & element you can define additional parameters to a link function. If we have attributes in scope object we can fetch that attribute value using scope.$watch. Element is nothing but the list of DOM elements.
Transclude option
Sometimes it is desirable to pass an entire template rather than a string of HTML or an object. Assume a condition where we have to create a dialog box. The dialog box should be able to wrap any arbitrary content. To do this, here we need to use the Transclude option. Transclude option accepts Boolean value.
Require Option
Require option is a restriction to nested directives. Let we want to do a tab control with respective panels. Here in-case I need to protect panels with & only with tabs then I can use require: ‘^myTabs’ under myPanel directive. While embedding in HTML we have to use myTab inside myPanel directive only.
For more details about Angular Custom Directive please refer the following links.
Guide for AngularJS Directive
AngularJS Custom Directive in Details
