AngularJS Custom Directive Template with Example

  Keywords : Custom directive template in angularjs with example, How to create custom directive in angularjs, Use of custom directive in angularjs with example

Here we will learn custom directives in angularjs, use of custom directives in angularjs and how to build our own custom directives in angularjs with example.

What are the Directives in AngularJS?

Generally directives in angularjs is used to extend the functionality of html controls by adding special behaviour to html dom elements.


In angularjs we have built in directives available those are ng-model, ng-bind, ng-init, etc. like these directives we can create our own custom directives in angularjs and these directives functionality will be activated in our angularjs applications using compile method wherever we called these directive elements.

Rules to Create Custom Directive in AngularJS

We need to follow some of rules to create custom directives in angularjs


  • Generally it's better to follow CamelCase to create directive name but as we know HTML is case-insensitive so it's better to use lower case to create directive.
  • You can give any name format to custom directive like studentmarks or student-marks, Always try use dash delimited format like e.g. student-mark.