Учебники

AngularJS — Пользовательские директивы

Октябрь 22, 2018

Пользовательские директивы используются в AngularJS для расширения функциональности HTML. Пользовательские директивы определяются с помощью функции «directive». Пользовательская директива просто заменяет элемент, для которого она активирована. Приложение AngularJS во время начальной загрузки находит соответствующие элементы и выполняет одноразовое действие, используя метод compile () пользовательской директивы, затем обрабатывает элемент, используя метод link () пользовательской директивы, основываясь на области действия директивы. AngularJS обеспечивает поддержку для создания пользовательских директив для элементов следующего типа.

  • Директивы элемента — Директива активируется, когда встречается соответствующий элемент.

  • Атрибут — Директива активируется при обнаружении соответствующего атрибута.

  • CSS — Директива активируется, когда встречается соответствующий стиль CSS.

  • Комментарий — Директива активируется, когда встречается соответствующий комментарий.

Директивы элемента — Директива активируется, когда встречается соответствующий элемент.

Атрибут — Директива активируется при обнаружении соответствующего атрибута.

CSS — Директива активируется, когда встречается соответствующий стиль CSS.

Комментарий — Директива активируется, когда встречается соответствующий комментарий.

Понимание пользовательских директив

Определите пользовательские теги HTML. 

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

Определите пользовательскую директиву для обработки выше пользовательских тегов HTML. 

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

Определите контроллер для обновления области действия директивы. Здесь мы используем значение атрибута name в качестве дочернего элемента области видимости. 

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

пример

Live Demo 

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

Выход

Откройте textAngularJS.htm в веб-браузере. Смотрите результат.

38
Share: