Angular Js Directives

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.

    Directive as an attribute

        <div ng-directive></div>

    Directive as a CSS class

        <div class="ng-directive: expression;"></div>

    Directive as an element

        <ng-directive></ng-directive>

    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>