Basically, a directive is a function that is executed once the AngularJS compiler finds it within the DOM. These functions will do nearly anything and that is why it is hard to define what a directive is. Every directive contains a name (such as ng-repeat, tabs, your-own-directive) and every directive determines where it is used, such as in DOM elements, or an attribute, or a class. For example, <copyright> </copyright> where copyright is an AngularJS directive.

AngularJS directives usually contain a post-link function that links directives to the element's children. A sophisticated directive may have a compile function, prelink function, and post-link function. Directives are used anywhere that you deploy the DOM and catch DOM events. This can be why the directive's compile-associated link functions each receive the element as an argument. You can:

Directives are the foremost significant elements of any AngularJS application. Though AngularJS comes with a wide selection of directives, you will typically get to create application-specific directives. A directive introduces new syntax in HTML. Directives are indicators on a DOM element that attach a special behavior to the element. As an example, a static HTML does not have skills to make and show a datepicker widget. To introduce this new syntax into HTML, we need a directive. The directive can somehow produce an element that behaves like a date picker.

You might have used built-in directives, such as, ng-repeat, ng-model, ng-show, and so on. These directives attach special behavior to DOM elements. For example, ng-repeat repeats a particular component and ng-show tentatively shows data in an element. However, we can create our own directives. The fundamental plan behind directives is incredibly easy. It makes markup languages interactive by attaching event listeners to the DOM and/or remodeling the DOM. Before we start writing a custom directive, we need to understand how AngularJS's compiler defines a built-in directive.

In the following example, the HTML <input> element uses the ng-Model directive:

<input ng-model="Mercedes-Benz">

AngularJS normalizes an element's tag and attribute name to work out which elements use that directive. We tend to generally refer to directives by their case-sensitive, camel case normalized names (such as ng-Model). However, since HTML is case insensitive, we tend to refer to directives within the DOM by lowercase forms, generally by dash-delimited attributes on DOM components (such as ng-model). The normalization process works by first stripping x- and data- from its attributes. After this, it converts the ::(colon), - (dash), or _ (underscore) delimited name to camel case. Thus, $compile matches directives that are based on element names, attributes, and class names, as well as comments according to the conversion used.

An AngularJS directive is compiled when the application starts. The AngularJS framework parses the DOM, using the $compile service. The $compile service starts looking for the AngularJS directive inside the DOM. As soon as all the directives in the DOM are identified, the AngularJS framework executes the compile functions. The compile functions then returns the link functions, which will be added to the list of link functions to execute later. This phase is called the compile phase of the application cycle. After this, the link function will start execution of each of the functions in the list one by one, and a template will be produced by the directives and evaluate the correct scope and display the DOM result on the page.