Detaillierte Erläuterung der Verwendung benutzerdefinierter Direktiven in AngularJS

Detaillierte Erläuterung der Verwendung benutzerdefinierter Direktiven in AngularJS_AngularJS

WBOY

Freigeben： 2016-05-16 15:54:28

Original

1340 Leute haben es durchsucht

Verwenden Sie AngularJS, um die Funktionalität von HTML in benutzerdefinierten Anweisungen zu erweitern. Funktionale Definition des von der benutzerdefinierten Direktive verwendeten „Befehls“. Die benutzerdefinierte Direktive ersetzt einfach das Element, für das sie aktiviert wird. Während des Bootstrapping-Vorgangs findet die AngularJS-Anwendung das passende Element und bereitet eine Aktivität mit der Methode „compile()“ der benutzerdefinierten Direktive vor, bevor sie das Element mit der Methode „link()“ der bereichsbasierten benutzerdefinierten Direktive der Direktive verarbeitet. AngularJS bietet Unterstützung für die Erstellung benutzerdefinierter Anweisungen basierend auf den folgenden Elementtypen.

Elementanweisungen – Anweisungen, die bei Begegnung ein passendes Element aktivieren.
Attribut – – Aktiviert ein passendes Attribut, wenn die Direktive angetroffen wird.
CSS – – Aktivieren Sie passende CSS-Stile, wenn die Direktive angetroffen wird.
Kommentar – – Aktiviert den passenden Kommentar, wenn der Befehl angetroffen wird.

Erfahren Sie mehr über benutzerdefinierte Anweisungen

Definieren Sie benutzerdefinierte HTML-Tags.

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

Nach dem Login kopieren

Definieren Sie benutzerdefinierte Anweisungen, um die oben genannten benutzerdefinierten HTML-Tags zu verarbeiten.

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

Nach dem Login kopieren

Definieren Sie einen Controller, um den Bereich als Direktive zu aktualisieren. Hier verwenden wir den Namensattributwert als Bereich des untergeordneten Elements.

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

Nach dem Login kopieren

Beispiel

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

Nach dem Login kopieren

Ergebnisse

Öffnen Sie textAngularJS.html in Ihrem Webbrowser. Sehen Sie sich die Ergebnisse wie folgt an:

2015617113318563.jpg (560×240)