Creating A Basic Custom Directive In AngularJS

• Directives are the base of AngularJS library.

• You have seen ng-app, ng-controller, ng-repeat  keywords used in AngularJS templates and partials.In my previous posts I have used these  repeatedly.These are nothing other than inbuilt directive from AngularJS library.

• In this Demo, "We will create a custom directive for students .This directive will append two string PASS (mark > 35) or FAIL  to the student mark as superscript".

• In my previous post we have seen how student data got loaded from a remote resource to a angular view.We will continue from that point to create our own custom directive.

• directive.js file is where we are going to write all our custom directive code.

•  'studentDetailApp.directives' is the module name for all our custom directive.

• Using directive() method we can create a new custom directive .

--- It returns a Object with link function defined in it.

---This Link function  has access to 4 parameters SCOPE, ELEMENT, ATTRIBUTES, CONTROLLER.

---In this Demo we are reading the mark property present inside a student SCOPE.

---Based on that mark We are modifying(appending the SUP  with string PASS OR FAIL) ELEMENT.

• The directive.js file contains all the code for custom directive.

'use strict';

/* Directives Module for studentDetailApp application */
var studentDirectiveModule = angular.module('studentDetailApp.directives', []);


studentDirectiveModule.directive('studentresult', function () {
    return {
        link: function (scope, elem, attrs, ctrl) {

              var mark = scope.aStudent.mark;

             (mark > 30 ) ?  elem.append('<sup class="green-student-pass">PASS</sup>')
                         :  elem.append('<sup class="red-student-fail">FAIL</sup>');
        }
    }
});

• The app.js file is the main entry point for the application.'studentDetailApp.directives' is directive module provided to the application where all the directive definition are present.

'use strict';

angular.module('studentDetailApp', ['studentDetailApp.controllers', 'studentDetailApp.services', 'studentDetailApp.directives']).

    config(['$routeProvider', function ($routeProvider, StudentController) {

        $routeProvider.when('/studentsList', {
            templateUrl: 'partials/studentListPartial.html',
            controller: 'StudentController'

        });

        $routeProvider.otherwise({redirectTo: '/'});

    }]);

• The studentListPartial.html file contains the partial-template code for the student detail table.The custom directive 'studentresult' is added as an attribute to the TD element.

<table class="table">
    <thead>
    <tr>
        <th>NAME</th>
        <th>ROLL</th>
        <th>SUBJECT</th>
        <th>MARK</th>
        <th>AGE</th>
        <th>COUNTRY</th>
    </tr>
    </thead>

    <tbody>
    <tr ng-repeat="aStudent in studentList">
        <td>{{aStudent.name}}</td>
        <td>{{aStudent.roll}}</td>
        <td>{{aStudent.subject}}</td>
        <td studentresult>{{aStudent.mark}}</td>
        <td>{{aStudent.age}}</td>
        <td>{{aStudent.country}}</td>
    </tr>
    </tbody>
</table>

• The controller.js file contains the code for StudentController, which has showStudentTable() method in its scope for handling click event of the button. 

'use strict';

/* Controllers Module for studentDetailApp application*/
var studentControllerModule = angular.module('studentDetailApp.controllers', ['ui.bootstrap']);

/*StudentController: controller for  students*/
studentControllerModule.controller('StudentController', function ($rootScope, $scope, $location, $routeParams,StudentService) {

    $scope.showStudentTable = function(pathurl){
       $location.path(pathurl);
       StudentService.get(function(result) {
            $scope.studentList=result.studentlist;
        });
    }
});

• The services.js file contains the code for student data resource.

'use strict';

/* Services Module for studentDetailApp application */
var studentControllerModule = angular.module('studentDetailApp.services', ['ngResource']);

studentControllerModule.factory('StudentService', function($resource){
    return $resource('http://localhost/remotedata/studentData.json');

});

• The index.html file contains the code for the main application.

<!doctype html>
<html lang="en" ng-app="studentDetailApp">

    <head>
        <title>Student Details App</title>
        <link rel="stylesheet" href="css/bootstrap-combined.min.css"/>
        <link rel="stylesheet" href="css/app.css"/>
    </head>

    <body class="student-container">

    <div class="row-fluid" ng-controller="StudentController">
        <button class='btn btn-info' ng-click="showStudentTable('/studentsList')">Show Student Table</button>
        <div ng-view></div>
    </div>


    <!--Required JS Files List :start -->
    <script src="lib/angular/angular.min.js"></script>
    <script src="lib/angular/angular-resource.min.js"></script>
    <script src="lib/bootstrap/ui-bootstrap-tpls-0.5.0.min.js"></script>
    <script src="js/services.js"></script>
    <script src="js/directives.js.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/app.js"></script>
    <!--Required JS Files List :end -->
    </body>
</html>

• The Firebug Console inspection of markup shows the SUP  HTML element gets appended to TD element  for each  mark cell.

•  The output in browser renders as below.You can see FAIL and PASS strings are superscript to the mark as the directive definition.