Search within TutorialsPark

AngularJS Directives : Complex Directives

Learn how to use AngularJS to create Complex Directives.

AngularJS Directives : Custom Directives

AngularJS directives can be customized to perform complex task which built-in directives cannot perform individually.

For the purpose of understanding how to create directives to perform complex task we will carry forward the example from last chapter of creating an ordered list.

AngularJS Directives: Defining Complex 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.

AngularJS Directives: Using Directives as an Element

AngularJS provides a set of directives which can be used to gain greater control over the custom directives and hence perform complex operations.

In the demo, the factory function has been altered such that it returns a definition object, instead of just a link function. The restrict property can be configured in four ways based on the usage requirement.

Table : AngularJS Complex Directive restrict property Configuration

Letter Description
E To use the directive as an element
A To use the directive as an attribute
C To use the directive as a class
M To use the directive as a comment

AngularJS Directives: Using Directives as an Element

A custom directive be applied as an element by using the character E as a value for the definition property restrict.

We use the directive as an element ordered-list, it is configured using the attribute listData.And since the source data has to be defined with new attribute, changes need to be made to the link function as well.

Example: AngularJS Directives Using Directives as an Element

Give it a TRY! » Note:The directive ordered-list is used as an attribute.

AngularJS Complex Directives: Using the Directive as an Attribute

Generally, most AngularJS directives are used a attributes, the value of the directive is name of the scope.

Example: Angular Complex Directives Using directive as an attribute

Give it a TRY! » Note:The value of restrict property is EACM, however even only A would suffice.

AngularJS Complex Directives: Using Directives as Class Attributes

An AngularJS directives can be applied as value for class attribute as well. In the demo, we have set the value of the class attribute as ordered-list.

Example: Angular Custom Directives Using Directive as Class Attributes

Give it a TRY! » Note: The value of the class as ordered-list:students, fees|currency will produce the same effect.

AngularJS Complex Directive : Using the Directive as a Comment

The AngularJS Directive can also be used as a comment , however this should be the last resort in case on no option is feasible.

Example: AngularJS Custom Directives Using the Directive as a Comment

Give it a TRY! » Note:This should be the last approach to using directives