Write Your Own Directives in AngularJS

Why AngularJS?

“HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable and quick to develop.” -AngularJS

A sample of AngularJS code:



ng-app, ng-model are Directives. Continue reading for more info on Directives.

Directives

Directives are a new syntax and are markers on a DOM element that attach a special behavior to it. For example, your HTML page doesn't know what to do with ng-app, ng-model. This is addressed by AngularJS. When Angular bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.

Let's learn custom directives but first we need to understand the AngularJS compilation process.

Compilation process
                                                  

The HTML compiler teaches the browser to learn new HTML syntax. It learns about new attributes, element names, comments or CSS classes. $compile is an Angular service that traverses the DOM. It's a 2-step process as in the following:

• Compile: collects all the directives from the HTML page
  
                                 
  
  
• Linking: It attaches events and scope with Directive
  
                               

Directive Definition Object (DDO)

To create a directive you can return a DDO object. It's recommended to use the "Directive Definition Object" form. Here is the blueprint of a directive:



Custom directive

I wrote a custom directive, rangeSlider. The purpose is to set minimum, maximum, steps and display current and last selected value from slider. To accomplish this I'm using a HTML5 range slider control and changing values in the DDO object.

There are three files, which are:

• Script.js: constitutes rangeSlider directive
• Template.html: HTML tags for rangeSlider are used by script.js
• Index.html: HTML file is consuming rangeSlider directive

Execute the code

I prefer to run it using local WebServer, for example http://localhost/angular/index.html.

If you run index.html directly from a web browser, say Chrome, it may give an error because of security reasons because rangeSlider is loading template.html into index.html.



You can download the complete code from the GIT repository.

RangeSliderDirective

After you configure it at the local webserver, run the site at the browser. It should show the following output:



Short explanation

Now, let's understand how it works.

A short explanation of each of the properties is shown next:

Property	Description
restrict	Determines where a directive can be used (as an element, attribute, CSS class, or comment).
scope	Used to create a new child scope or an isolate scope.
template	Defines the content that should be output from the directive. Can include HTML, data binding expressions and even other directives.
templateUrl	Provides the path to the template that should be used by the directive. It can optionally contain a DOM element id when templates are defined in <script> tags.
Controller	Used to define the controller that will be associated with the directive template.
link	Function used for DOM manipulation tasks.

Goto Creating Custom Directives for more details.