What is Angular Directives and its overview

priyadarshini

Angularjs directives can be used to manipulate the DOM, those will be represented with prefix ‘ng-’.  The main and first directive that should be included in all angular app is “ng-app”. This directive will help us to specify the angular properties which are used in that application.There are many inbuilt directives in angular to manipulate DOM through javascript.

Mostly used inbuilt directives

-ng-app:

This will initialize the angular section in application

Eg: <html ng-app>

</html>

-ng-init:

This will be used to initialize the default value for variable

Eg: To assign value 10 to variable value.

<div ng-init=”value=10”>

-ng-bind:

The directive to bind the values between view and controller in angular. Without this directive, binding can be done by using “{{ }}” directly.

Eg: Display the value in a webpage.

<div ng-init=”value=10”>

{{value}} //direct way

<span ng-bind=”value”> // this will display the value in web page

-ng-class:

This is same as “class” in HTML tag attribute which is used to include the CSS elements in DOM

Eg: To style our element

<div ng-class=” ’changeColor’ ”>This div will be in the color which is written in changeColor class</div>

-ng-click:

This attribute is same as javascript on click attribute, this will help us to make user interaction  websites in angular

Eg: Generate the click event

<button ng-click=”callFunction”>Call Function</button>

On click of this button, it will trigger the function named callFunction.

-ng-if:

This directive can be used to decide that the DOM element should be present on the website or not.

Eg: <div ng-if=”true”></div>

This div will be always visible

I have created a simple angular app implementing above inbuilt directives you can see the plunker link here

-ng-repeat:

This directive will work like a for loop in javascript, this will repeat the DOM element till the user specified value.

Eg: <div ng-repeat=”number in [1,2,3,4,5]”>

Plunker link for ng-repeat is here

-ng-model:

This directive will give the access to two-way binding in angular. In ng-bind we can only view the controller generated values in web page, to get the user entered values in the web page dynamically ng-model directive  will be used

Eg:

The “modelVariable” will be scoped element in controller

“<input  ng-model=modelVariable />”

The above tag will display the value of the modelVariable in an input box.

-ng-controller:

We can specify the controller for the app using this directive. The plunker link for ng-model and ng-controller is here

 Eg: <body ng-controller=”exampleCtrl”>

This tag will specify the controller of the body.

There are many more angular directives available to manipulate the DOM to know more about it please click here.

We can also create our own directive in angular app

Custom directives in Angularjs

Directives are defined using “directive” function in the angular app, Directive will replace the DOM element for which it should be activated.

That can be replaced by following type of elements,

Element directives:

Our custom directive will be activated by matching element in DOM.

Attribute:

Directive will replace the element which is having matching attribute.

CSS:

The custom directive will replace the element which is having matching CSS style.

Comment:

The directive will replace the matching comment element.

Using custom directives we can write our own tags in HTML, That will be replaced with our directive template.

Options in directives:

-Restrict:

We can restrict the way for using our directive in HTML using this option, in this, we can write the type of the elements.

Eg: Restrict: ‘EACM’ (E-Element, A-Attribute, C-Class, M-Comment)

-Priority:

While creating more directives we can set our priority to our each directive which has to be rendered initially

Eg: priority: 1

-Terminal:

This will accept the boolean value, based on that value the other directive in lower priority will be decided to execute.

Eg: terminal: false // by default this will be false

-Template:

The DOM element will be assigned to this which will replace the matching directive element

Eg:template : ‘<div>This will be replaced by directive tag</div>’

-TemplateUrl:

To replace the directive element we can give a path to another HTML file using this property.

Eg:templateUrl : ‘sampleDirective.html’ //absolute path for HTML file to replace the directive tag

-Replace:

This property will accept boolean values, if this is true the directive tag will be replaced with template values otherwise the directive tag will be root tag and the template value will be child element for that while rendering.

Eg: replace: true // the directive name will be replaced with template

-Controller:

We can specify separate controller for each directive using this property.

Eg:controller : sampleDirectiveCtrl // the controller function

-Require:

This will be true for the child directive element for another directive.

Eg: require: ‘^firstDirective’ //here firstDirective is another directive which will act as parent for this directive  

-Transclude:

This property must be true to render the values in between the directive tag when it is restricted as Element.

Eg: transclude: true // this will allow us to write our inputs in between our directive tag

-Link:

The link is the function where we can write our logic to be executed after the directive rendered in DOM.

Eg: link : function(){

// this will be executed after our directive rendered in DOM

}

free ebook

about the author

priyadarshini