Rumah >hujung hadapan web >tutorial js >Penjelasan terperinci tentang penggunaan arahan tersuai dalam AngularJS_AngularJS

Penjelasan terperinci tentang penggunaan arahan tersuai dalam AngularJS_AngularJS

WBOYasal: 2016-05-16 15:54:281340semak imbas

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>

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

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

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>

Keputusan

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

2015617113318563.jpg (560×240)

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Masalah kecil dengan $.extend_jqueryArtikel seterusnya：Masalah kecil dengan $.extend_jquery

Artikel berkaitan

Lihat lagi