Customize AngularJS Directives: A Step by Step Tutorial

Of all the components of Angular.js, directives are usually the most important. Angular.js provides a large number of directives which cover many different scenarios but at one time or another, you will need to create directives that are specific to the application. The directive that you create will attach a particular behavior to a DOM element.

Web developers will always want to be creative and in this case, you may want to use your own custom directives, that is why learning how to go about them is important.

What You Need to Know Before Getting Started

First time Angular.js users will find that directives are not a walk in the park. Without prior experience, the features of Angular.js are complex in nature, and there are a wide range of options to choose from. This will leave you wondering whether you should adopt a trial and error stance, or simply guess and hope that you choose the right option. Like a puzzle, it will all become easier when you understand how all the pieces are meant to fit together, and the only way that you can get to this point is by consistent practice. Every time that you create an Angular application, you will need to make use of a directive. With this in mind, you are ready to get started.

Taking the First Step

The best way to begin is to analyze an existing example so that you can identify the module and the controller. These are essential for the functionality of the app. In the following directive, you have been requested to create a grid display with customer information. In this display, you are to come up with a custom directive to ensure that your display works. Refer the following details to get started.

app.controller('CustomersController', ['$scope', function ($scope) {
    var counter = 0;
    $scope.customer = {
        name: 'Michael',
        lane: '5498 The Place Ln.'
    };
    
    $scope.customers = [
        {
        name: 'Michael',
        lane: '5498 The Place Ln.'
        },
        {
            name: 'Molly',
            lane: '3741 Crown Ln.'
        },
        {
            name: 'Carolyn',
            lane: '710 Capital Ln.'
        }
    ];

    $scope.addCustomer = function () {
        counter++;
        $scope.customers.push({
            name: 'New Customer' + counter,
            lane: counter + ' Mountain Peak Ln.'
        });
    };

    $scope.changeData = function () {
        counter++;
        $scope.customer = {
            name: 'Philip',
            lane: counter + ' Mountain Peak Ln.'
        };
    };
}]);

The information that you have input may be required for several different things, and you will need to be able to re-use data binding expressions. This means that the next step would be for you to create these data binding expressions in such a way that they are similar to the existing information in the entire app. You can do so by following the example below: –

Name: {{customer.name}} 


Lane: {{customer.lane}}

With more than one technique available, you can choose your preference that will allow you to re-use the application at any time that you require.

You can then attempt the next step which involves creating a custom directive. To do this you will need to do two main things. Begin by locating the target module for your directive and then give it a name. The name given shall be shared with the function of the directive. Then, you can embed this directive into the data binding expression that you created earlier. The following example clarifies this.

angular.module('directivesModule').directive('mySharedScope', function () {
    return {
        template: 'Name: {{customer.name}}
 Lane: {{customer.lane}}'
    };
});

Putting Together Your Custom Directives

Every Angular.js directive will come in four flavors as far as its appearance is concerned. These flavors are a new HTML element, an attribute on an element, as a class and also as a comment. Through these directives, it becomes possible to convert a simple object into something that can configure a directive. Consider the following example:

var app = angular.module('myapp', []);

app.directive('helloWorld', function() {
  return {
      restrict: 'AE',
      replace: 'true',
      template: '
Hello World!!
'
  };
});

This code reveals that the first argument represents the name of the directive and the second argument represents directive definition object. When you isolate the directive, it can be used in HTML as follows: –

hello-world/>

Also See: 15 Best Resources for Developers to Learn AngularJS

Properties of Directives

To complete your customized Angular JS Directive, you need to be familiar with its properties. The directive that you choose may include one or more of the following properties: –

• Restrict – This property specifies the place that the directive shall be used.
• Template – This specifies what content the directive will have as output, and often incorporates other directives as well. Templates can be simple as well as complex in their nature.
• Replace – This property specifies whether the generated template will be replaced with an HTML element as soon as a directive has been attached to it.
• Scope – This property is used for isolating a scope or when you need to create a new child scope
• Controller – This property is necessary for the definition of the controller for the specified directive template
• Link – This is a property that is utilized for the manipulation of DOM tasks.

Angular JS and DOM Manipulation

You can use a directive for more than just data binding with your templates, it is also useful for manipulating DOM. For this to occur, it is necessary to understand the directives life cycle. This cycle has four functions which are used by a developer to customize a directive. The functions are as follows: –

• Compile – This is the function that allows the manipulation of the COM before it has been combined with other elements.
• Controller – This functions enables communication between different directives.
• Pre-Link – $scope manipulation that is to be kept private, is possible with this function.
• Post-Link – This is the function that drives the directive method.

With this information at hand, it will be possible for you to read and understand Angular JS application coding, so that you can input your preferred directives to customize your output.

Creating something of your own can be quite exciting and this is what custom directives are all about. You can create directives that can be used in the creation of your own applications.