Please enable Javascript to correctly display the contents on Dot Net Tricks!

Directives

Posted On : 05 Feb 2015
Updated On : 10 Feb 2015
Total Views : 7417

AngularJS directives are a combination of AngularJS template markups (HTML attributes or elements, or CSS classes) and supporting JavaScript code. The JavaScript directive code defines the template data and behaviors of the HTML elements.

AngularJS directives are used to extend the HTML vocabulary i.e. they decorate html elements with new behaviors and help to manipulate html elements attributes in interesting way.

There are some built-in directives provided by AngularJS like as ng-app, ng-controller, ng-repeat, ng-model etc.

A simple directive example

<div ng-app="">
 <input type="text" ng-model="name">
 <div>{{ name }}</div>
</div>

Invoking directive

AngularJS provides you four ways to invoke a directive from HTML. These are all equivalent in AngularJS.

  1. Directive as an attribute

    <div ng-directive></div>
    
  2. Directive as a CSS class

    <div class="ng-directive: expression;"></div>
    
  3. Directive as an element
    <ng-directive></ng-directive>
    

  4. Directive as a comment

    <!-- directive: ng-directive expression -->
    

Commonly Used Directives

ng-app

This directive is used to initialize the angular app.

<div ng-app="">
 <!-- TO DO: -->
</div>

ng-init

This directive is used to initialize the angular app data.

<div ng-app="" ng-init="name='webgeekschool'">
 <div>{{ name }}</div>
</div>

ng-model

This directive is used to bind the html elements like input, select, text area to angular app model.

<div ng-app="">
 <input type="text" ng-model="name">
 <div>{{ name }}</div>
</div>

ng-if

This directive can add / remove HTML elements from the DOM based on an expression. If the expression is true, it add HTML elements to DOM, otherwise HTML elements are removed from the DOM.

<div ng-app="app">
<div ng-controller="MyCtrl">
 <div ng-if="data.isVisible">ng-if Visible</div>
</div>
</div>
<script>
 var app = angular.module("app", []);
 app.controller("MyCtrl", function ($scope) {
 $scope.data = {};
 $scope.data.isVisible = true;
 });
</script>

ng-switch

This directive can add / remove HTML elements from the DOM conditionally based on scope expression.

<div ng-app="app">
<div ng-controller="MyCtrl">
 <div ng-switch on="data.case">
 <div ng-switch-when="1">Shown when case is 1</div>
 <div ng-switch-when="2">Shown when case is 2</div>
 <div ng-switch-default>Shown when case is anything else than 1 and 2</div>
 </div>
</div>
</div>

<script>
 var app = angular.module("app", []);
 app.controller("MyCtrl", function ($scope) {
 $scope.data = {};
 $scope.data.case = true;
 });
</script>

ng-repeat

This directive is used to iterate over a collection of items and generate HTML from it.

<div ng-app="app">
<div ng-controller="MyCtrl">
 <ul>
 <li ng-repeat="name in names">
 {{ name }}
 </li>
 </ul>
</div>
</div>

<script>
 var app = angular.module("app", []);
 app.controller("MyCtrl", function ($scope) {
 $scope.names = ['Shailendra', 'Deepak', 'Kamal'];
 });
</script>

Custom Directive

AngularJS also allow you to create your own directives based on your requirements. There is no built-in directive for comparing password in angular. So you can create your own custom directive for comparing password.

Creating Custom Directive Syntax

<script>
//creating custom directive syntax
myApp.directive("myDir", function () {
 return {
 restrict: "E", //define directive type like E = element, A = attribute, C = class, M = comment
 scope: { //create a new child scope or an isolate scope
 
 //@ reads the attribute value,
 //= provides two-way binding,
 //& works with functions
 
 title: '@'
 },
 template: "<div>{{ myName }}</div>",// define HTML markup
 templateUrl: 'mytemplate.html', //path to the template, used by the directive
 replace: true | false, // replace original markup with template yes/no
 transclude: true | false, // copy original HTML content yes/no
 controller: function (scope) { //define controller, associated with the directive template
 //TODO:
 },
 link: function (scope, element, attrs, controller) {//define function, used for DOM manipulation
 //TODO:
 }
 }
 });
</script>

Creating Custom directive for comparing two text box values

AngularJS Custom Directive
What do you think?
I hope you will have better understanding of Directives in AngularJS. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.