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,
- Introduction to AngularJS – Day 1
- Introduction to AngularJS – Day 2
- Introduction to AngularJS – Day 3
- Introduction to AngularJS – Day 4
- Introduction to AngularJS – Day 5
- 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.
- <scripttype="text/javascript">
-
- var app = angular.module("Csharp", []);
-
- app.controller("Corner", function ($scope)
- {
-
- });
-
- app.directive("myDirective", function ()
- {
- return
- {
- template: "<h2>Custom Directive Created Successfully!</h2>"
- };
- });
- </script>
Invoke or use the directive in the following ways:
- Same as HTML tags or Element:
-
- <my-directive></my-directive>
- As an attribute like HTML:
- As a class in HTML:
-
- <pclasspclass="my-directive"></p>
The following is the complete code for creating custom directive in simple way:
- <!DOCTYPEhtml>
- <htmlng-apphtmlng-app="Csharp">
-
- <head>
- <title>Directives in AngularJS</title>
- <scriptsrcscriptsrc="Scripts/angular.min.js">
- </script>
- </head>
- <bodyng-controllerbodyng-controller="Corner">
- <h2>Welcome to C# Corner</h2>
-
- <my-directive></my-directive>
- <scripttypescripttype="text/javascript">
- //module created var app = angular.module("Csharp", []); //controller created app.controller("Corner", function ($scope) { }); //directive created app.directive("myDirective", function () { return { template: "
- <h2>Custom Directive Created Successfully!</h2>" }; });
- </script>
- </body>
- </html>
Output of the above code is as follows:
The following are some key properties of directives, used when we create a custom directive in AngularJS as follows:
- 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.
-
- app.directive("myDirective", function()
- {
- return
- {
- template: "<h2>Custom Directive Created Successfully!</h2>"
- };
- });
The above code shows the use of template property in custom directive.
- 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.
-
- app.directive("myDirective", function()
- {
- return
- {
- templateUrl: "template_url.html"
- };
- });
‘template_url.html’ file code:
- <!DOCTYPEhtml>
- <htmlxmlns="http://www.w3.org/1999/xhtml">
-
- <head>
- <title></title>
- </head>
-
- <body>
- <h2>Welcome to C# Corner Community!</h2>
- </body>
-
- </html>
The following is the complete code of using ‘templateUrl’ property:
- <!DOCTYPEhtml>
- <htmlng-app="Csharp">
-
- <head>
- <title>Directives in AngularJS</title>
- <scriptsrc="Scripts/angular.min.js">
- </script>
- </head>
- <bodyng-controller="Corner">
- <h2>Welcome to C# Corner</h2>
- <!-- As a HTML tag -->
- <my-directive></my-directive>
-
- <scripttype="text/javascript">
-
-
- </script>
- </body>
-
- </html>
The output of the above code is as follows:
- 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 name | E | <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:
-
- app.directive("myDirective", function()
- {
- return
- {
- restrict: 'E',
- templateUrl: "template_url.html"
- };
- });
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:
- <!DOCTYPEhtml>
- <htmlng-app="Csharp">
-
- <head>
- <title>Directives in AngularJS</title>
- <scriptsrc="Scripts/angular.min.js">
- </script>
- </head>
- <bodyng-controller="Corner">
- <h2>Welcome to C# Corner</h2>
- <!-- As a HTML element -->
- <my-directive></my-directive>
- <!-- As a HTML attribute -->
- <pmy-directive>
- </p>
- <scripttype="text/javascript">
-
- </script>
- </body>
-
- </html>
-
- ‘template_url.html’
- <!DOCTYPEhtml>
- <htmlxmlns="http://www.w3.org/1999/xhtml">
-
- <head>
- <title></title>
- </head>
-
- <body>
- <h2>Welcome to C# Corner Community!</h2>
- </body>
-
- </html>
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:
Now, we test using debugging tool of chrome which directive print ‘Element’ or ‘Attribute’.
When we move cursor in attribute 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!