Creating Custom AngularJS Directives – 4 Examples

AngularJS is packed with powerful directives out of the box but, often times we come across scenarios where we may want to create our own reusable functionality. In this post, we’ll focus on how to tackle the seemingly complex process of creating directives.

If you haven’t yet, go through the following posts to learn more about what AngularJS directives are and how to use it’s in-built directives.

  1. All you need to know about AngularJS Directives
  2. Understanding AngularJS built-in directives and how to use them

In this post we shall learn how to write our own directives by creating four simple directives. While these examples may not explain the complete functionality of directives, they will help us understand usage of some common features of directives.

  1. backButton Directive : Applying this directive on an element will make the element behave like a back button of the browser. We will be uisng history.back() of $window service to achieve it.
  2. ngEnter Directive : Applying this directive on an element will enable us to capture the event when a user presses the enter button on the keyboard.
  3. onlyNumber Directive : Applying this directive on an element will not aloow the user to key-in any other characters apart from the number.
  4. ourStudents Directive : In this directive, we will be making use of template and scope of Directive Definition Object.

backButton

In the above code, we have named our directive as backButton and passed $window service as a dependency. We have restricted the directive to be used as an Attribute. Next, we have a created a link function that binds the click event to the element.

So, whenever a user clicks on the element that has this directive as an attribute, it will fire the link function and thus the user will be taken to a page in the history by one.

How to use:

ngEnter

Often times when developing applications we come across scenarios where we may want to capture the enter event (user pressing the enter key on keyboard). The following directive will help us capture that event and call a function in the controller when that happens.

In the code above, we are binding both keydown and keypress events to the element and are checking to see if the key that is being used is 13 (the key number for enter key). If it is true, we are raising the event and preventing the default functionality.

How to use:

onlyNumber

So you have a textbox and the requirement is to allow only numbers to be entered into it. While this can be achieved in a number of ways, lets attempt to do it using AngularJS directive.

In the above code, we have created an array of possible number only key codes and are comparing the key that is being pressed with the elements in the array. We allow the input if true are prevent the default behavior if not.

How to use

ourStudents

Javascript

Template (my-customer-iso.html)

HTML (index.html)

The above code shows how to use template and scope in directives.

Demystifying the above code:

  1. We have initialized an array called students and attached it to the scope.
  2. Since the directive is within ng-controller definition, it will have access to the students array in scope.
  3. Students array is now passed as info to the directive.
  4. Within the directive scope definition, we are assigning the students array to a variable on the scope called “studentInfo“.
  5. studentInfo is accessible to the template and when we do an ng-repeat on studentInfo, it will print it.

Play with the code on plunker here http://plnkr.co/edit/mqFyIF?p=preview

Leave a Reply

Top