AngularJS - Petunjuk Kustom

Arahan kustom digunakan di AngularJS untuk memperluas fungsionalitas HTML. Perintah kustom ditentukan menggunakan fungsi "direktif". Perintah kustom hanya menggantikan elemen yang mengaktifkannya. Aplikasi AngularJS selama bootstrap menemukan elemen yang cocok dan melakukan aktivitas satu kali menggunakan metode compile () dari direktif kustom kemudian memproses elemen tersebut menggunakan metode link () dari direktif kustom berdasarkan cakupan direktif tersebut. AngularJS menyediakan dukungan untuk membuat arahan kustom untuk jenis elemen berikut.

Element directives - Directive aktif ketika elemen yang cocok ditemukan.
Attribute - Directive aktif ketika atribut yang cocok ditemukan.
CSS - Directive aktif ketika gaya css yang cocok ditemukan.
Comment - Arahan aktif ketika komentar yang cocok ditemukan.

Memahami Petunjuk Kustom

Tentukan tag html kustom.

<student name = "Mahesh"></student><br/>
<student name = "Piyush"></student>

Tentukan direktif kustom untuk menangani tag html kustom di atas.

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

//Create a directive, first parameter is the html element to be attached.	  
//We are attaching student html tag. 
//This directive will be activated as soon as any student element is encountered in html

mainApp.directive('student', function() {
   //define the directive object
   var directive = {};
   
   //restrict = E, signifies that directive is Element directive
   directive.restrict = 'E';
   
   //template replaces the complete element with its text. 
   directive.template = "Student: <b>{{student.name}}</b> , 
      Roll No: <b>{{student.rollno}}</b>";
   
   //scope is used to distinguish each student element based on criteria.
   directive.scope = {
      student : "=name"
   }
   
   //compile is called during application initialization. AngularJS calls 
      it once when html page is loaded.
	
   directive.compile = function(element, attributes) {
      element.css("border", "1px solid #cccccc");
      
      //linkFunction is linked with each element with scope to get the element specific data.
      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", "#ff00ff");
      }
      return linkFunction;
   }
   
   return directive;
});

Tentukan pengontrol untuk memperbarui cakupan direktif. Di sini kita menggunakan nilai atribut nama sebagai anak cakupan.

mainApp.controller('StudentController', function($scope) {
   $scope.Mahesh = {};
   $scope.Mahesh.name = "Mahesh Parashar";
   $scope.Mahesh.rollno  = 1;
   
   $scope.Piyush = {};
   $scope.Piyush.name = "Piyush Parashar";
   $scope.Piyush.rollno  = 2;
});

Contoh

<html>
   <head>
      <title>Angular JS Custom Directives</title>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "StudentController">
         <student name = "Mahesh"></student><br/>
         <student name = "Piyush"></student>
      </div>
		
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
      <script>
         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", "#ff00ff");
               }
               return linkFunction;
            }
            
            return directive;
         });
         mainApp.controller('StudentController', function($scope) {
            $scope.Mahesh = {};
            $scope.Mahesh.name = "Mahesh Parashar";
            $scope.Mahesh.rollno  = 1;

            $scope.Piyush = {};
            $scope.Piyush.name = "Piyush Parashar";
            $scope.Piyush.rollno  = 2;
         });
      </script>
      
   </body>
</html>

Keluaran

Buka textAngularJS.htm di browser web. Lihat hasilnya.