Search within TutorialsPark

AngularJS Modules : Directives

Learn how to build AngularJS application using Directives Modules, an Introduction

AngularJS Modules : Directives

In AngularJS Directives are used to assign special behaviour to DOM elements, and teach it new properties. Essentially they are JavaScript functions which are invoked when the DOM is compiled.

AngularJS allows you to create new directives that can be used to assign logic and simplify the DOM manipulation process.

Of all the modules of AngularJS the most exciting one is of directives, beacause of the flexibility and custom features it offers.We learn about directives in great detail in later chapters.

AngularJS Modules: Creating Directives

AngularJS provides a rich set of built in directives for various purposes, we will see that later.To create a custom directive use the method Module.directive

In the demo, the lecture scheduled for Wednesday is highlighted, by setting the value of the first view as the value of the attribute styled, if any other value is specified the text is not highlighted.

Syntax: AngularJS ModulesController

Give it a TRY! » Note: The text is styled only if the value of the attribute is same as the value of first view.


The attribute styled is a custom directive, the value of which is Wednesday - DBMS

On discovering the attribute styled AngularJS invokes the function, which has three arguments : scope of view, the element having the directive, attributes of the element.

The argument scope checks the available data , and get the value of the property lectures.

The argument attrs returns a complete set of attributes, including the directive attribute. If the value of the attribute styled is same as lectures from the scope