Post
Ask Question

Introduction to AngularJS – Day 7

In the 7th day of AngularJS article series, we are going to learn next key players/concept of AngularJS that is understanding the concept of Custom Directives in AngularJS. Before moving to key players/concepts of AngularJS, please read my previous articles,

  1. Introduction to AngularJS – Day 1
  2. Introduction to AngularJS – Day 2
  3. Introduction to AngularJS – Day 3
  4. Introduction to AngularJS – Day 4
  5. Introduction to AngularJS – Day 5
  6. Introduction to AngularJS – Day 6

Custom Directives

In the previous articles we learned built in directives of AngularJS. Now time to create our own directive. Firstly, we will learn how to register custom directive in module. It’s the same process as we create controller, the directives require the creation of something called Directive Definition Object that will be used to configure the directive's behaviour, and the previous one is a simple way to create a directive.

  1. <scripttype="text/javascript">  
  2. //module created  
  3. var app = angular.module("Csharp", []);  
  4. //controller created  
  5. app.controller("Corner", function ($scope)   
  6. {  
  7.   
  8. });  
  9. //directive created  
  10. app.directive("myDirective", function ()  
  11. {  
  12.     return  
  13.     {  
  14.         template: "<h2>Custom Directive Created Successfully!</h2>"  
  15.     };  
  16. });  
  17. </script>  
Invoke or use the directive in the following ways: 
  1. Same as HTML tags or Element:
    1. <!-- As a HTML tag -->    
    2. <my-directive></my-directive>   
  2. As an attribute like HTML:
    1. <!-- As a HTML attribute -->  
    2. <pmy-directive></p>  
  3. As a class in HTML:
    1. <!-- As a class in HTML -->  
    2. <pclasspclass="my-directive"></p>  

The following is the complete code for creating custom directive in simple way:

  1. <!DOCTYPEhtml>  
  2. <htmlng-apphtmlng-app="Csharp">  
  3.   
  4.     <head>  
  5.         <title>Directives in AngularJS</title>  
  6.         <scriptsrcscriptsrc="Scripts/angular.min.js">  
  7.             </script>  
  8.     </head>  
  9.     <bodyng-controllerbodyng-controller="Corner">  
  10.         <h2>Welcome to C# Corner</h2>  
  11.         <!-- As a HTML element -->  
  12.         <my-directive></my-directive>  
  13.         <scripttypescripttype="text/javascript">  
  14.             //module created var app = angular.module("Csharp", []); //controller created app.controller("Corner", function ($scope) { }); //directive created app.directive("myDirective", function () { return { template: "  
  15.             <h2>Custom Directive Created Successfully!</h2>" }; });  
  16.      </script>  
  17.      </body>  
  18. </html>  
Output of the above code is as follows:

output
The following are some key properties of directives, used when we create a custom directive in AngularJS as follows: 
  1. template

    In the previous code we used ‘template’ property when we create our own directive. Template is nothing but the HTML code. This outputs the content of the directive to the view. It can be in the form of HTML, data binding.
    1. //directive created  
    2. app.directive("myDirective", function()   
    3. {  
    4.     return  
    5.     {  
    6.         template: "<h2>Custom Directive Created Successfully!</h2>"  
    7.     };  
    8. });  
    The above code shows the use of template property in custom directive.

  2. templateUrl

    There is other way to use HTML code, just place the above code in separate file and provide the file name to this property ‘templateUrl’. It’s nothing but the path to the template, which is used in the directive. The following code shows how to use this property and achieve our goal.
    1. //directive created  
    2. app.directive("myDirective", function()   
    3. {  
    4.     return   
    5.     {  
    6.         templateUrl: "template_url.html"  
    7.     };  
    8. });  
    ‘template_url.html’ file code:
    1. <!DOCTYPEhtml>  
    2. <htmlxmlns="http://www.w3.org/1999/xhtml">  
    3.   
    4.     <head>  
    5.         <title></title>  
    6.     </head>  
    7.   
    8.     <body>  
    9.         <h2>Welcome to C# Corner Community!</h2>  
    10.     </body>  
    11.   
    12.     </html>  
    The following is the complete code of using ‘templateUrl’ property:
    1. <!DOCTYPEhtml>  
    2. <htmlng-app="Csharp">  
    3.   
    4.     <head>  
    5.         <title>Directives in AngularJS</title>  
    6.         <scriptsrc="Scripts/angular.min.js">  
    7.             </script>  
    8.     </head>  
    9.     <bodyng-controller="Corner">  
    10.         <h2>Welcome to C# Corner</h2>  
    11.         <!-- As a HTML tag -->  
    12.         <my-directive></my-directive>  
    13.   
    14.         <scripttype="text/javascript">  
    15.             //module created var app = angular.module("Csharp", []); //controller created app.controller("Corner", function ($scope) { }); //directive created app.directive("myDirective", function () { return { templateUrl: "template_url.html" }; });  
    16.   
    17.      </script>  
    18.      </body>  
    19.   
    20. </html>  
    The output of the above code is as follows:

    output
  3. restrict

    It provides the restriction for the directive to be used. For example, element, CSS class, attribute.The directives are restricted to be applied as an attribute to a determined element, but we can change this behavior by declaring the restriction property inside our directive configuration object. The directive has the the following restrict types:

    Restriction property Values Usage
    Attribute(default)A<div my-directive></div>
    Element nameE<my-directive></my-directive>
    Class C<div class="my-directive"></div>
    Comment M<!-- directive: my-directive -->

    Now, we just need to include this property in our directive, as in the following code:

    1. //directive created  
    2. app.directive("myDirective", function()  
    3. {  
    4.     return   
    5.     {  
    6.         restrict: 'E',  
    7.         templateUrl: "template_url.html"  
    8.     };  
    9. });  
    In the above code you can see we use restriction property ‘E’ means we can use directive as an element not attribute or class. The following is the complete code of this restriction property example:
    1. <!DOCTYPEhtml>  
    2. <htmlng-app="Csharp">  
    3.   
    4.     <head>  
    5.         <title>Directives in AngularJS</title>  
    6.         <scriptsrc="Scripts/angular.min.js">  
    7.             </script>  
    8.     </head>  
    9.     <bodyng-controller="Corner">  
    10.         <h2>Welcome to C# Corner</h2>  
    11.         <!-- As a HTML element -->  
    12.         <my-directive></my-directive>  
    13.         <!-- As a HTML attribute -->  
    14.         <pmy-directive>  
    15.             </p>  
    16.             <scripttype="text/javascript">  
    17.                 //module created var app = angular.module("Csharp", []); //controller created app.controller("Corner", function ($scope) { }); //directive created app.directive("myDirective", function () { return { restrict:'E', templateUrl: "template_url.html" }; });  
    18.                 </script>  
    19.                 </body>  
    20.   
    21.                 </html>  
    22.   
    23.                 ‘template_url.html’  
    24.                 <!DOCTYPEhtml>  
    25.                 <htmlxmlns="http://www.w3.org/1999/xhtml">  
    26.   
    27.                     <head>  
    28.                         <title></title>  
    29.                     </head>  
    30.   
    31.                     <body>  
    32.                         <h2>Welcome to C# Corner Community!</h2>  
    33.                     </body>  
    34.   
    35.                     </html>  
    CODE

    The above image illustrate how we use created directive in view. In the above example we used restriction property as ‘E’ means we use directive as ‘Element’, in example we used both the way as Element and as Attribute but here only print first one and here's the output:

    output

    Now, we test using debugging tool of chrome which directive print ‘Element’ or ‘Attribute’.

    directive

    When we move cursor in attribute directive:

    directive

    Great, we learned create custom directives in AngularJS with example successfully.

    Summary

    I hope that beginners as well as students understand the concept of creating Custom Directives in AngularJS with example. If you have any suggestion regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon.

    Thanks for reading. Learn it! Share it! 


Similar Articles