Pexels (CC0), Pixabay

Hello, dear readership! Now, you’ll read some interesting articles about, ”How to create a custom directive in AngularJS?” This topic becomes the main one today.

So, keep reading – I’ll shed some light on all information.

Understanding custom directive in AngularJS

According to the experts’ opinions, directive controls the rendering of the HTML inside an AngularJS application. Directives such as ng-click, ng-show/ng-hide, ng-repeat, and many others found in the AngularJS core script make it simple to get excited using the framework. But you should remember what directive is. In the simplest terms, a directive in AngularJS is a reusable element. A more formal definition of a directive is: In AngularJS, a directive is a JavaScript factory use defined inside an AngularJS module that operates a set of directions for the HTML compiler for defining a defined behavior of a DOM component. Nowadays, it is possible to achieve your directives. Many people claim that AngularJS allows you to produce new directives so that you can encapsulate and explain DOM manipulation. Many studies have shown that custom directives are used to extend the functionality of HTML. It is very important that a custom directive simply follows the component for which it is activated.

Greatest of you have seen the basic directives that you use in everyday application development. They are ng-app, ng-init ng-model, ng-repeat.

  1. Ng-model fixes the value of HTML with Angular.
  2. Ng-app is used for bootstrap applications.
  3. Ng-repeat repeats HTML element.
  4. Ng-class dynamically binds CSS characters to HTML & these directives could be a line, object, or an order.
  5. Ng-init initializes data for the app.

Needless to say, custom directives are adopted in AngularJS to increase the functionality of HTML. A custom directive simply returns the element for which it is activated. AngularJS application during bootstrap gets the equal elements and provides a one-time activity using its compile method of the custom directive then processes the component using the link method of the custom directive based on the scope of the directive.

Directive Types

AngularJS gives help to create custom directives for the following type of parts.

  1. Element directives − Directive begins when a matching element is found.
  2. Attribute − Directive begins when a matching attribute is found.
  3. CSS − Directive activates when a matching CSS style is encountered.
  4. Comment  − Directive activates when a matching annotation is encountered.

But of these, AngularJS recommends that you choose to use element and attribute directives, and give the CSS class, and comment directives. Moreover, the type of directive defines how the directive is activated. An element directive is activated when AngularJS finds a parallel HTML element in the HTML template. As for the attribute, a directive is initiated when AngularJS finds a matching HTML element quality. It should be noted, a CSS class directive is initiated when AngularJS gets a matching CSS Class. Not only but also, a comment directive is initiated when AngularJS finds a matching HTML comment.

Way to create directives in AngularJS

It goes without saying that there are various ways you can create directives in AngularJS.

This way it’s quite similar to HTML where you store custom data that will be put on a page or an application. You can also verify the same through an HTML reader. Clearly, AngularJS gives the naming convention for custom directives so that the name of a property will agree to custom Directives. There are a few guidelines and recommendations from AngularJS while holding and calling the same in your application.

  1. Decide to write the Directives’ name in the lower case.
  2. Suppose your new Directive is “MyNewDirective”. To call directives in the View, write my-new-directive, my_new_directive, my:new: directive, you can use (,) comma colon(:) underscore(_) hyphen(-).
  3. Furthermore, one should not forget that template resources for Directives enable you to add the HTML content to the HTML.


Another factor to consider is directives help to create a repeatable and free code. As you can see, they modularize the code by hitting requirement-specific behavioral functions in one place, rather than producing some things in the central controller and managing them using multiple JavaScript methods. As an added benefit, the HTML page and Angular scripts become less dirty and more oriented.

Using controllers with directives

As you can see, Angular provides the ability to access the controller’s member variable right from the system directives without any requirements for the scope object. This displays the importance at times because in an application you may have many scope things relating to multiple controllers.


In this article, you’ve read about Custom Directives in AngularJS through a brief introduction and way to create custom directives and their advantages. It is clear from the facts that with directives, you can create custom HTML tags, characteristics, or classes to achieve the required functionality over an HTML section. This then becomes an independent and reusable element that can be installed on the same or various HTML pages.