Directives in AngularJS

Directives is the AngularJS preferred method for building reusable components. This is one of the key features of AngularJS for extending HTML vocabulary. Directives combine the HTML template and the definitions in Controller together. AngularJS has also a lot of built-in directives. The ng-repeat, being used in the last post, is one of them. In fact, Ng prefixed items in templates are all directives. We can also define custom directives in the Controller.

Custom defined directives usually take different forms: as element, as attribute, as class, as comment or as any combination of them. The following code defines directive as element.

app.directive('myTag', function(){
  // Runs during compile
  return {
    restrict: 'E', // E = Element, A = Attribute, C = Class, M = Comment
    template: '<div>This is my tag</div>'

  };
});

After definition, we can use the directive in the html template:

<my-tag></my-tag>

Similarly, you can define custom directive as attribute:

app.directive('myTag', function(){
  // Runs during compile
  return {
    restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
    template: '<div>This is my tag</div>'

  };
});

Then you can use it in html file as follows:

<div my-tag></div>

Interestingly, AngularJS can also manipulate DOM in directive definitions. The way is to use the link option.

app.directive('newOne', function(){
  // Runs during compile
  return {
    restrict: 'C', // E = Element, A = Attribute, C = Class, M = Comment
    template: 'hello world',
    // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
    link: function($scope, iElm, iAttrs, controller) {
      iElm.text("Good bye");
    }
  };
});

The html template is:

<div class="new-one"></div>