Angularjs Examples

AJS Examples


AngularJS Custom Directives

AngularJS custom directives used as an attribute to control the rendering of the HTML inside an AngularJS application. All built in directives are prefixed with the ng namespace. AngularJS allow you to implement your own custom namespace for directives.

Type of Directives

  • Element directives - Activated when matching HTML element attribute found.
  • Attribute directives - Activated when matching HTML element in the HTML template found.
  • CSS class directives - Activated when matching CSS Class found.
  • Comment directives - Activated when matching HTML comment found.

In order to create custome directive, you need to give directive definition and register it by giving a name as a string and function name in module. Custome directive name should be pascal style like myDirective and function should always be return object data.

Syntax

angular.module('yourApp',  [])
  .directive('myDirective',  function()  {
     return  {
       restrict: 'E',
       template:  'click here'
     }
});