AngularJS - Define a basic Custom Directive

Directives are used to attach a specified behavior to the DOM elements by using event listeners. Behavior can be anything, you want to perform some action on any desired event attached with the element or it can even transform the DOM element itself and/or its children. All this is done by AngularJS's HTML compiler which makes DOM elements interactive, means it does attach the behavior source code with target elements. 

Same as you create controllers and services for application requirements, you can define your own custom directives for specific purposes. Following is the template object showing the available options while creating a custom directive.

var objectTemplate = {
restrict: string,
priority: number,
template: string,
templateUrl: string,
replace: bool,
transclude: bool,
scope: bool or object,
controller: function, 
require: string,
link: function,
compile: function
};

Lets start defining a basic custom directive.

var myApp = angular.module('demoApp', []);
myApp.directive('helloWorld', function () {
 return {
  restrict: 'EA',
  template: '
Hellow World! Message from custom directive. And here is the inserted text: .
',
  transclude: true
 };
 });

Lets review the code segment:
restrict property defines the declaration style of the directive, this can have following options:
E => directive will be declared as element, e.g. <hello-world></hello-world>
A => attribute, e.g. <div hello-world></div>
C => class, e.g. <div class=hellow-world></div>
M => comment, e.g. <!--directive:hellow-world -->

In this example I have only used two options EA, it means we can declare our directive as an element or also can be added as an attribute to another element. So the following two lines will produce the same result.

• <hello-world></hello-world>

• <div hello-world>Div own message</div>

You can define the DOM elements to be replaced through the template or templateUrl properties. We can set the template content via a string, and templateUrl will be used if we want the template to be loaded from a file. We just defined our template as '<div>Hellow World! Message from custom directive. And here is the div text: <span ng-transclude></span>.</div>' to put a simple message inside a div.

transclude property allow us to replace or append the content from template with the regular content defined by element. Note that we have placed ng-transclude attribute on span tag and place it inside our template. Now when the page will be requested to load, the AngularJS HTML compiler will replace this span tag with the regular content defined within the element. Like in the following example, we display the number as the div's content alongwith the content defined in template property.

<div ng-repeat='number in [1,2,3,4,5]'>
 <div hello-world>{{number}}</div>
</div>

In this post we learned how to declare a basic custom directive. Hopefully in next post I will try to explain how to add logic in our directive to make it more interactive.