Angular JS Directives

Element , Attribute, CSS, Comment Directives.

by Paola D'Antonio

HTML

<html>

  <head>
    <title>Angular JS Directives</title>
  </head>

  <body>
    <h2>Angular JS Directives</h2>

    <div ng-app="mainApp" ng-controller="StudentController">
      <student name="Paola"></student>
      <br/>
      <student name="David"></student>
      <br/>
      <student name="James"></student>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

  </body>

</html>

TypeScript

var mainApp = angular.module("mainApp", []);

   mainApp.directive('student', function() {
     var directive = {};
     directive.restrict = 'E';
     directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";

     directive.scope = {
       student: "=name"
     }

     directive.compile = function(element, attributes) {
       element.css("border", "1px solid #cccccc");

       var linkFunction = function($scope, element, attributes) {
         element.html("Student: <b>" + $scope.student.name + "</b> , Roll No: <b>" + $scope.student.rollno + "</b><br/>");
         element.css("background-color", "lightpink");
       }
       return linkFunction;
     }

     return directive;
   });

   mainApp.controller('StudentController', function($scope) {
     $scope.Paola = {};
     $scope.Paola.name = "Paola DAntonio";
     $scope.Paola.rollno = 1;

     $scope.David = {};
     $scope.David.name = "David DAntonio";
     $scope.David.rollno = 2;

     $scope.James = {};
     $scope.James.name = "James Bond";
     $scope.James.rollno = 3;
   });