AngularJS - Özel Yönergeler

AngularJS'de HTML'nin işlevselliğini genişletmek için özel yönergeler kullanılır. Özel direktifler "yönerge" işlevi kullanılarak tanımlanır. Özel bir yönerge, etkinleştirildiği öğenin yerini alır. Bootstrap sırasında AngularJS uygulaması eşleşen öğeleri bulur ve özel yönergenin compile () yöntemini kullanarak bir seferlik etkinlik gerçekleştirir, ardından yönergenin kapsamına göre özel yönergenin link () yöntemini kullanarak öğeyi işler. AngularJS, aşağıdaki öğe türleri için özel yönergeler oluşturma desteği sağlar.

Element directives - Yönerge, eşleşen bir öğeyle karşılaşıldığında etkinleşir.
Attribute - Yönerge, eşleşen bir öznitelikle karşılaşıldığında etkinleşir.
CSS - Yönerge, eşleşen bir css stiliyle karşılaşıldığında etkinleşir.
Comment - Yönerge, eşleşen bir yorumla karşılaşıldığında etkinleşir.

Özel Direktifi Anlamak

Özel html etiketleri tanımlayın.

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

Yukarıdaki özel html etiketlerini işlemek için özel bir yönerge tanımlayı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;
});

Yönerge kapsamını güncellemek için denetleyiciyi tanımlayın. Burada name özniteliğinin değerini kapsamın alt öğesi olarak kullanıyoruz.

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

Misal

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

Çıktı

Açık textAngularJS.htm bir web tarayıcısında. Sonucu görün.