Introduction to AngularJS

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,

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">
//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>

Invoke or use the directive in the following ways:

Same as HTML tags or Element:
1. 
2. <my-directive></my-directive>
As an attribute like HTML:
1. 
2. <pmy-directive></p>
As a class in HTML:
1. 
2. <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:

output

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.
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.
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">
4. <head>
5. <title></title>
6. </head>
8. <body>
9. <h2>Welcome to C# Corner Community!</h2>
10. </body>
12. </html>
The following is the complete code of using ‘templateUrl’ property:
1. <!DOCTYPEhtml>
2. <htmlng-app="Csharp">
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. 
12. <my-directive></my-directive>
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" }; });
17. </script>
18. </body>
20. </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 
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">
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. 
12. <my-directive></my-directive>
13. 
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>
21. </html>
23. ‘template_url.html’
24. <!DOCTYPEhtml>
25. <htmlxmlns="http://www.w3.org/1999/xhtml">
27. <head>
28. <title></title>
29. </head>
31. <body>
32. <h2>Welcome to C# Corner Community!</h2>
33. </body>
35. </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!

7 Comments

Join the conversation! Your thoughts help the community grow.

Vivek Kumar10y ago
Good one.
Chandradev Prasad10y ago
Nice article.
- Jeetendra Gund10y ago
  Thanks Chandradev Sir
Santhakumar Munuswamy10y ago
Thanks for nice article.
- Jeetendra Gund10y ago
  Thanks Santhakumar Munuswamy Sir
Sibeesh Venu10y ago
Nice Share
- Jeetendra Gund10y ago
  Thanks Sibeesh Venu sir

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 -->