Penjelasan terperinci tentang penggunaan arahan tersuai dalam AngularJS

Penjelasan terperinci tentang penggunaan arahan tersuai dalam AngularJS_AngularJS

WBOY

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

asal

1337 orang telah melayarinya

Gunakan AngularJS untuk melanjutkan kefungsian HTML dalam arahan tersuai. Takrif fungsional "perintah" yang digunakan oleh arahan tersuai. Arahan tersuai hanya menggantikan elemen yang ia diaktifkan. Semasa proses bootstrapping, aplikasi AngularJS mencari elemen padanan dan menyediakan aktiviti menggunakan kaedah compile() arahan tersuai sebelum memproses elemen menggunakan kaedah pautan() arahan tersuai berasaskan skop arahan. AngularJS menyediakan sokongan untuk membuat arahan tersuai berdasarkan jenis elemen berikut.

Arahan elemen - Arahan yang mengaktifkan elemen padanan apabila ditemui.
Atribut - - Mengaktifkan atribut yang sepadan apabila arahan ditemui.
CSS - - Aktifkan gaya CSS yang sepadan apabila arahan ditemui.
Ulasan - - Mengaktifkan ulasan yang sepadan apabila arahan ditemui.

Ketahui tentang arahan tersuai

Tentukan teg HTML tersuai.

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

Salin selepas log masuk

Tentukan arahan tersuai untuk mengendalikan teg HTML tersuai di atas.

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

Salin selepas log masuk

Tentukan pengawal untuk mengemas kini skop sebagai arahan. Di sini, kami menggunakan nilai atribut nama sebagai skop kanak-kanak.

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

Salin selepas log masuk

Contoh

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

Salin selepas log masuk

Keputusan

Buka textAngularJS.html dalam penyemak imbas web anda. Lihat hasilnya seperti berikut:

2015617113318563.jpg (560×240)