AngularJS - Chỉ thị tùy chỉnh

Các chỉ thị tùy chỉnh được sử dụng trong AngularJS để mở rộng chức năng của HTML. Các chỉ thị tùy chỉnh được xác định bằng cách sử dụng chức năng "chỉ thị". Một chỉ thị tùy chỉnh chỉ thay thế phần tử mà nó được kích hoạt. Ứng dụng AngularJS trong quá trình bootstrap tìm các phần tử phù hợp và thực hiện hoạt động một lần bằng cách sử dụng phương thức compile () của chỉ thị tùy chỉnh, sau đó xử lý phần tử bằng phương thức liên kết () của chỉ thị tùy chỉnh dựa trên phạm vi của chỉ thị. AngularJS cung cấp hỗ trợ để tạo các chỉ thị tùy chỉnh cho loại phần tử sau.

Element directives - Chỉ thị kích hoạt khi gặp phần tử phù hợp.
Attribute - Chỉ thị kích hoạt khi gặp thuộc tính phù hợp.
CSS - Chỉ thị kích hoạt khi gặp kiểu css phù hợp.
Comment - Chỉ thị kích hoạt khi gặp nhận xét phù hợp.

Hiểu Chỉ thị Tùy chỉnh

Xác định các thẻ html tùy chỉnh.

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

Xác định chỉ thị tùy chỉnh để xử lý các thẻ html tùy chỉnh bên trên.

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;
});

Xác định bộ điều khiển để cập nhật phạm vi cho chỉ thị. Ở đây chúng tôi đang sử dụng giá trị của thuộc tính name làm con của phạm vi.

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;
});

Thí dụ

<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>

Đầu ra

Mở textAngularJS.htm trong trình duyệt web. Xem kết quả.