Directive in AngularJS

Dear all,  today we will discuses,

  1. What Is Directive?
  2. How will we create a custom directive?

What Is Directive?

A Directive is a function that executes when the angular complier that found it is in DOM. Each Directive has a name and each directive determines where it can be used.

We can make custom directives to use like Element (E), Attribute (A), Class (C) and comments (M).

We can also create combined as (AEC).

How will we Create Custom Directive?

Angular js class library already provides many predefined directives

Like - ng-app, ng-model, ng-click, ng-init etc.

Directives have camel cased names such as myDirective. The directive can be invoked by translating the camel case name into snake case with these special characters:, -, or _. Optionally the directive can be prefixed with x-, or data- to make it HTML validator compliant.

Step 1- Create a Index Page where I want to use my directive,

code

Step 2 - Create a js file where we create custom directive,
code
After making directive and when we run page output look like.

output

Next Recommended Reading AngularJS ngRepeat Directive