Get all updates of Java4s
Follow Us: Email Newsletter

How to Create Custom Directives in AngularJs

AngularJs » On Jan 5, 2016 By Sivateja

In this article I will describe how to create custom directives in the AngularJs. Custom angular directives are the markers of DOM element, I mean we will write the custom directives as normal HTML elements, attributes, CSS classes and as Comments in the view (in .html, .jsp page etc). Angular compiler will attach the specific behaviors to the DOM in place of these directives.


As I told, in Angularjs we can create custom directives in 4 different ways:

  • Element directives
  • Attribute directives
  • CSS class directives
  • Comment directives

But how can we instruct angular to choose which type (Attribute, Element, CSS Clsss, Comment) of directive can be used in the page ? here we have a property called ‘restrict‘, by using this we can easily intimate angular how our custom directive is going to be displayed in the page.

Let me give a simple syntax and usage for all these four types:


In View (.html/.jsp)


  • In the syntax, I have created my own directive with name java4sDirective [ line number 3 ] and a return function [line number 4], having two properties, restrict & template
  • restrict – this property will accept four values E,A,C,M. In the current syntax I am using ‘E‘ means I am going to create/use my custom directive as an element in the HTML (in view line number 1<java4sDirective></java4sDirective>)

    restrict : ‘E‘ > If we would like to use our custom directive as an Element
    restrict : ‘A‘ > If we would like to use our custom directive as a Attribute
    restrict : ‘C‘ > If we would like to use our custom directive as Class
    restrict : ‘M‘ > If we would like to use our custom directive as a Comment

  • template - this property will accept the plain/HTML content to be displayed in our page in place of our custom directive

This is how we can create a simple custom directive in angularjs, but its not over, still there is somthing to learn regarding angular custom directive :-) In the above syntax, the return function having two properties called ‘restrict‘ and ‘template‘, apart from these we also have few other properties templateUrl, compile & link functions, controller, firstly I will explain about templateURL.

Using templateUrl

We already know about template property, this property will accept one or two or three or some lines of Text/HTML :-) and displayed in our page, but what if you want to display lines and lines of Text/HTML content ? Actually template property can do that but we need to write lines of text/html code in the JavaScript (in the return function) but that’s not a good deal.

Now templateUrl comes into picture, just put all your HTML in a separate file, and just specify that URL to templateUrl property, simply angularjs will load your HTML code from that file.


In View (.html/.jsp)

Angular now will load HTML template/content from the URL you have given to templateUrl and that’s it.

Complete Example



I am from external HTML file.


Just open index.html in a browser and you will see…

I am from external HTML file.


In the index.html

  • line number 8 > created custom directive with name ‘java4sCustomDir’
  • line number 10 > restrict : ‘C’ means, we are going to use our custom directive as a class in the view (<div class=”java4sCustomDir”></div>)
  • line number 12 > templateUrl: ‘<…..>/custDirHtml.html’ means, content in custDirHtml.html will be fetched and stored in teamplateUrl property and will be displayed in place of our directive (line number 19), that’s it :-)

Just forget about compile, link functions and directive controller for now, I will explain about them in the coming article by taking an example.

You Might Also Like

  ♦ About Author ♦

Full Stack( Java/J2EE & UI/UX ) Developer and founder of Java4s - Get It Yourself, A popular Java/J2EE Programming Blog. Sign-up for the Email Newsletter for your daily dose of Java tutorials.



By posting your answer, you agree to our comments policy.
What would you like to learn today?
Browse these popular technologies
Hibernate spring struts Servlets ajax Log4j jQuery Json Core Java Web Services AngularJs
Most Recent Tutorials
Hibernate_Logo Hibernate Recent Posts Spring_Logo Spring Recent Posts Struts_Logo Struts Recent Posts
Useful Links Current & UpComing Tutorials
  Web Services [ SOAP ], JSP
Contact | About Us | Privacy Policy | Advertise With Us

© 2010 - 2016 Java4s - Get It Yourself.
The content is copyrighted to Sivateja Kandula and may not be reproduced on other websites.