Explication détaillée de l'utilisation des directives personnalisées dans AngularJS

Explication détaillée de l'utilisation des directives personnalisées dans AngularJS_AngularJS

WBOY

Libérer： 2016-05-16 15:54:28

original

1344 Les gens l'ont consulté

Utilisez AngularJS pour étendre les fonctionnalités du HTML dans les instructions personnalisées. Définition fonctionnelle de la "commande" utilisée par la directive personnalisée. La directive personnalisée remplace simplement l'élément sur lequel elle est activée. Au cours du processus d'amorçage, l'application AngularJS trouve l'élément correspondant et prépare une activité à l'aide de la méthode compile() de la directive personnalisée avant de traiter l'élément à l'aide de la méthode link() de la directive personnalisée basée sur la portée de la directive. AngularJS prend en charge la création de directives personnalisées basées sur les types d'éléments suivants.

Directives d'élément - Directives qui activent un élément correspondant lorsqu'il est rencontré.
Attribut - - Active un attribut correspondant lorsque la directive est rencontrée.
CSS - - Activez les styles CSS correspondants lorsque la directive est rencontrée.
Commentaire - - Active le commentaire correspondant lorsque la commande est rencontrée.

En savoir plus sur les directives personnalisées

Définissez des balises HTML personnalisées.

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

Copier après la connexion

Définissez des directives personnalisées pour gérer les balises HTML personnalisées ci-dessus.

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

Copier après la connexion

Définissez un contrôleur pour mettre à jour la portée sous forme de directive. Ici, nous utilisons la valeur de l'attribut name comme portée de l'enfant.

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

Copier après la connexion

Exemple

<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="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/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>

Copier après la connexion

Résultats

Ouvrez textAngularJS.html dans votre navigateur Web. Voir les résultats comme suit :

2015617113318563.jpg (560×240)