Creating a Custom Directive in AngularJS

In this post I am going to explain, how we can create a simple custom directive in AngularJS. This is my 10th blog in AngularJS series.

Let’s say we are using an HTML template in a page and it is used in multiple places. It could be anything like employee information, etc. Now you have modified something in that template, so you will also need to modify the same thing in multiple places also. Here, we can use the custom template expanding directive and store that template in another HTML page and reuse it in multiple places. And if you need to modify anything in that template in future you can do that in just one place and you are done. That’s the awesome power of AngularJS 🙂

So, how we do that? Let’s start by modifying the controller code that I had created in my previous blog here: Creating a Controller in AngularJS. Now, lets modify the HTML code a bit and change it to this:-

<body ng-controller="myController as controller">
  <div class="well">
    <h3>{{controller.prop.name}}</h3>
    <h4>{{controller.prop.result}}</h4>
  </div>
  <div class="well">
    <h3>{{controller.prop.name}}</h3>
    <h4>{{controller.prop.result}}</h4>
  </div>
  <div class="well">
    <h3>{{controller.prop.name}}</h3>
    <h4>{{controller.prop.result}}</h4>
  </div>
</body>

As you have must have noticed, I have just added the div template

<div class="well">
   <h3>{{controller.prop.name}}</h3>
   <h4>{{controller.prop.result}}</h4>
</div>

three times here just to show that same template being used in multiple place. This is just to explain the issue here. Now, we will see how to create a custom directive to reuse the same template and minimize coding.

STEPS:

1. Firstly, we need to create a new html page and place the above template from index.html to a new html page. Let’s name it sample-tag.html, as we are going to create a new tag/element to replace the above template.

2. Add the below directive code in app.js file. This will create a new directive named ‘sampleTag’ and that can be used as tag in html markup like ‘sample-tag’.

  app.directive('sampleTag', function() {
    return {
      restrict: 'E',
      templateUrl: "sample-tag.html",
      controller: function() {
        this.prop = obj;
      },
      controllerAs: "controller"
    };
  });

Here, the templateUrl string is the html page that we had created in step 1 and controllerAs is the alias of the controller that we are using in this page.

3. In third and final step, we just need to replace all our div template with the custom tag named ‘sample-tag’. So, our HTML markup will now look like:-

<body ng-controller="myController as controller">
  <sample-tag></sample-tag>
  <sample-tag></sample-tag>
  <sample-tag></sample-tag>
</body>

Demo:
Working Demo on Plunker

That’s it! We have finally created our first simple custom directive. If you have any comments or suggestion about this post, I would really appreciate it.
Happy Coding 🙂

Advertisements

One thought on “Creating a Custom Directive in AngularJS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s