Create a custom directive in AngularJS

What are directives?

If you are learning about AngularJS, you need to know what is directive and why it is important. So what is directive? You can see ng-app, ng-controller and so on that are directives build in of AngularJS. In some special case we need to create a custom directive to adapt with our demand. It can be profile-card or some thing like that.

Benefits

So what is the benefits of custom directive? As my experiences, I think it has three benefits:
1. The code will shorter and easy to understand (readable)
2. Re-useable, you write and it can be re-used in future. It depends on how you generic it.
3. Transparent interacting between main controller and directive.

Real situation

I will show you a real situation that I've done in my job. The situation is that I need to show a list of profiles to the page. As usual, we will write all codes to the list profile controller and profile page view. Now we are going to separate two parts, one is list of profile and second is the detail of profile (profile card).

Inside Directive

The below is the code of a profile card directive, I will go through and explain every elements.

angular.module('AngularExample')  
    .directive('profileCard', function () {
        var dir = {
            link: link,
            restrict: 'E',
            scope: {
                profile: '='
            },
            templateUrl: '/app/profileCard.html'
        };
        return dir;

        function link(scope, element, attrs) {
            element.on('click', function () {
                alert('Hello, this is ' + scope.profile.name);
            });
        }
    });

We create a custom directive by using syntax module.directive('directiveName', function(){}). The second parameter is a function that returns directive object. Let's see what will be involved:

  • scope
  • restrict
  • template/templateUrl
  • link
  • controller

In this post we only talk about scope, restrict, templateUrl and link.

scope: It is the same to scope in controller where keep data that interacts with markup html. If scope is undefined, the directive will use the scope of main controller. And when scope is defined, the main controller scope cannot use in the directive. So how to pass data from main controller into directive, there are three options, first is passing object data using =, for passing a function using & and for value using @.

restrict: This defines how we use the directive on markup. We use it as a html element, an attribute or even a class.

E - Element name (default): <profile-card></profile-card>  
A - Attribute (default): <div profile-card="profile"></div>  
C - Class: <div class="profile-card: profile;"></div>  
M - Comment: <!-- directive: profile-card profile -->  

templateUrl: This indicates where the markup html of the directive.

link: This function is to interact with directive element, for instance, we handle when user click on the card.

Demo

Go to see the demo. I use CodePen for easy to reach the demo. So I put the directive markup direct in the directive by replace template to templateUrl.

Conclusion

In real world, you need to create a lot of directives to fulfill the requirement so custom directive is very important. Let's give it a try and let me know if you get stuck in any step. If you need an environment to write Angular code, check out my last post. Happy coding!

Nguyen Tran

I'm Nguyen, a full stack web passion for frontend and love Angular.

Subscribe to Nguyen Tran

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!