Search within TutorialsPark

AngularJS Directives : Custom Directives


Learn how to use AngularJS to create Custom Directives.


AngularJS Directives : Custom Directives

The AngularJS provides a extensive set of directives that can be used to tackle all demands of a web application.But it also enables you to create your directives to address situations where in built-in directives are not sufficient.

Built in directives are used when the you need to express complex functionality, or inorder to create a self contained unit of functionality that can be used in multiple AngularJS Applications


AngularJS Directives: Creating Custom Directives

We create a demo AngularJS project to create a Directive which can generate ordered list containing list items.

At first we define the Directive using Module.directive, use the custom directive as attribute in HTML code, then we get Data from the Scope, and Finally generate HTML elements.

Example: AngularJS Directives Creating Custom Directives

Give it a TRY! » Note:The custom directive ordered-list, is used as an attribute, value of which array name.

AngularJS Directives: Remove Data Dependence with Support Attribute

Last AngularJS directive example was dependent on the elements within the array to generate list items, thus the directive is attached to specific data set and hence cannot be used elsewhere in the application.

In order to remove the dependency, we use an attribute which specifies the property to be displayed, and the link function is provided with all attributes used within the element.

Example: Angular Directives Removing Dependence on Data by using Support Attribute.

Give it a TRY! » Note:The value of attribute show-property is obtained from the key showProperty.


AngularJS Directives: Evaluate Expressions without Data Dependence

An AngularJS custom directive using a support Attribute cannot be applied with a filter, because we read the value of attribute and use the same value as the name of the property within HTML elements.

To overcome this problem, we use the scope to evaluate the value of attribute as an expression, hence we use the method scope.$eval. It is passed with a expression and the current info object as a source for properties needed expression evaluation.

Example: Angular Custom Directives Evaluate Expression without Data Dependence

Give it a TRY! » Note: The list shows the value of fees properties for each data object, all applied with currency filter.


AngularJS Custom Directive : Responding to Data Changes.

The AngularJS Custom directive can be made to respond to change in source data, we have included a button which increments the data on every click, the change in scope is monitored using the method $watch

The watch method uses two functions, first being the watcher function, to calculate the value based on the data within the scope, and is invoked each time the scope undergoes a change.

Example: AngularJS Custom Directives Responding to Data Changes

Give it a TRY! » Note:The custom directive monitors the list elements, and updates them when value changes.