AngularJS – Directives

Directives are used to direct something. It is so simple, right? 🙂 Yes, it is simple also when we use them in AngularJS. But we need to follow some guidelines, creating and using them in AngularJS.

What is that something directive direct? That is the behavior of the elements. We use AngularJS with HTML. HTML has DOM (Document Object Model) elements to control or display the HTML page. Angular directives are useful to change the behavior of these DOM elements.

Directives are key components in AngularJS. These are allowed to extend the HTML functionality and also enable dynamic behavior. Usually, we follow the dash (“-“) delimited format to define the directives. For example, ng-bind directive.

AngularJS provides built-in directives, like ng-app, ng-bind, ng-class and ng-model. And also allows us to create our own directives.

We can apply directives to element names, attributes, class names, comments, etc,. Here is an example of applying directives.

Example of applying Directives

Apply directive to an element:

<my-custom-directive>

</my-custom-directive>

Apply directive to an attribute:

<div my-custom-directive="name"></div>

Apply directive to a class name:

<div class="my-custom-directive: name;"></div>

Apply directive to a comment:

<!-- directive: my-custom-directive name -->

We will discuss more in my upcoming Articles.

</> Michael