AngularJS - Defining Custom Directives - Part II

In last post we have seen how to create a basic custom directive in AngularJS, we have used three properties i.e. restrict, template and transclude. Let explore some more features AngularJS provides while using cutom directives. In this post I will focus on templateUrl and the link function.

Template / TemplateUrl Properties: 
We can define the DOM elements to be replaced through the template or templateUrl properties. We have seen an example for template property in the last post, let try options with templateUrl property. At a fundamental level we can use the template property to define our directives content as inline string. As in example below:

validationApp.directive('directiveWithInlineString', function () {
    return {
        restrict: 'EA',
        template: 'Hello from the Directive-With-Inline-String Template', 
    };
});

Next thing we have is the templateUrl property which gives us more flexibility in writing tempaltes. We can use templateUrl in multiple ways.

First method is write html content in a file placed on server, and put that file's url in templateUrl property. For exmaple create file named 'htmlTemplate1.html' and put the following content and save it.

<h3>My Heading</h3>
<p>Hello from the Directive-With-Url Template</p>

Now we can use this file as directive template by putting file url in templateUrl property.

validationApp.directive('directiveWithUrl', function () {
    return {
        restrict: 'EA',
        templateUrl: 'views/htmlTemplate1.html'        
    };
});

This will look for a file 'htmlTemplate1.html' inside 'views' folder and load it as the content of element that imeplemented this directive.

Second method is to write html content within the script tag, with type = 'text/ng-template' and a unique id for our template.

<script type='text/ng-template' id='key_for_template_in_script_tag'>
     <p>Hello from the Directive-With-Template-Key-In-Script-Tag</p>
</script>

Here I defined id='key_for_template_in_script_tag' to uniquely identity the template, now next thing is use this template and for this we have to simply put this key name in the templateUrl property. As in example below:

validationApp.directive('directiveWithScriptTag', function () {
    return {
        restrict: 'EA',
        templateUrl: 'key_for_template_in_script_tag'
    };
});

Just make sure that you place the directive tempalte first, before its implemenation when loading your page.

Third method is to place the template in the cache object used by Angular called the $templateCache. Same like we defined a unique key to template definition in the script tag, we have to label the template for identification. To place things in $templateChache we have to use run function on the module.

validationApp.run(function ($templateCache) {
    $templateCache.put('key_for_template_in_templatecache', 'Hello from the Directive-With-Template-Key-In-TemplateCache');
});

First argument of put function is the key we want to define for template and second argument is the actual content we want to use. We can implement this template in the same way as we did in script tag method.

validationApp.directive('directiveWithTemplateCache', function () {
    return {
        restrict: 'EA',
        templateUrl: 'key_for_template_in_templatecache',
    };
});

Link function: 
Link function will be used to make DOM elements dynamic. Angular runs a link function for each directive and attach event liseners on the DOM elements, this way we can keep the view and model in sync making it more interactive. Let create a directive with link function to transform text between upper case and lower case with mouse movement.

validationApp.directive('directiveWithLinkFunction', function () {
    return {
        restrict: 'EA',

        link: function ($scope, element, attrs) {

            element.bind('mouseenter', function () {
                element.css('text-transform', 'uppercase');
            });
            element.bind('mouseleave', function () {
                element.css('text-transform', 'lowercase');
            });
        }
    }
});

Inside the link function, we are receiving our DOM element in the parameter 'element' , we can attach events, makes changes or write validation logic etc. In this example we are attaching the CSS class to the element to transform text between upper case and lower case.

That's it, its pretty easy making custom directives with even dynamic behavior. I hope you enjoyed this post and learned something useful. I the next post, I will discuss about the scope options we can use in custom directives.