- Email devpro.edu.vn@gmail.com
- Hotline0985.95.08.95
AngularJS cho phép bạn mở rộng HTML với các thuộc tính mới được gọi là Directive (chỉ thị). Một Directive thị tùy chỉnh chỉ đơn giản là thay thế các phần tử mà nó được kích hoạt. Bài hôm nay chúng ta sẽ đi tìm hiểu về các Directive trong AngularJS
Ứng dụng AngularJS trong bootstrap tìm các phần tử phù hợp thực hiện một hoạt động bằng cách sử dụng phương thức biên dịch () của chỉ thị tùy chỉnh sau đó xử lý phần tử bằng cách sử dụng phương thức link () của chỉ thị tùy chỉnh dựa trên phạm vi của chỉ thị. AngularJS cung cấp hỗ trợ để tạo các chỉ thị tùy chỉnh cho loại phần tử sau.
Element directives - Chỉ thị kích hoạt khi một yếu tố phù hợp gặp phải
Attribute - Chỉ thị kích hoạt khi một thuộc tính phù hợp gặp phải.
CSS - Chỉ thị kích hoạt khi gặp phải một kiểu css phù hợp.
Comment - Chỉ thị kích hoạt khi một bình luận phù hợp gặp phải.
Các ng-app chỉ thị khởi tạo một ứng dụng AngularJS.
Các ng-initchỉ thị khởi dữ liệu ứng dụng.
Các ng-modelchỉ thị liên kết với các giá trị của các điều khiển HTML (input, select, textarea) để dữ liệu ứng dụng.
Chỉ thị ng-app: chỉ thị xác định các phần tử gốc của một ứng dụng AngularJS. Các ng-app chỉ thị sẽ tự động khởi động (tự động khởi tạo) áp dụng khi một trang web được tải.
Chỉ thị ng-init: Các ng-init chỉ thị xác định giá trị ban đầu cho một ứng dụng AngularJS. Thông thường, bạn sẽ không sử dụng ng-init. Thay vào đó, bạn sẽ sử dụng bộ điều khiển hoặc mô-đun.
Chỉ thị ng-model: Các ng-modelchỉ thị liên kết với các giá trị của các điều khiển HTML (input, select, textarea) để dữ liệu ứng dụng.
Các ng-model chỉ thị cũng có thể:
Cung cấp xác nhận loại cho dữ liệu ứng dụng (số, email, bắt buộc).
Cung cấp trạng thái cho dữ liệu ứng dụng (không hợp lệ, bẩn, chạm, lỗi).
Cung cấp các lớp CSS cho các phần tử HTML.
Liên kết các phần tử HTML với các biểu mẫu HTML.
Xác định thẻ html tùy chỉnh.
Xác định chỉ thị tùy chỉnh để xử lý các thẻ html tùy chỉnh ở trên.
ar 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: {{student.name}} , Roll No: {{student.rollno}}";
//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: "+$scope.student.name +" , Roll No: "+$scope.student.rollno+"
");
element.css("background-color", "#ff00ff");
}
return linkFunction;
}
return directive;
});
Xác định bộ điều khiển để cập nhật phạm vi cho chỉ thị. Ở đây chúng ta đang sử dụng giá trị của thuộc tính name như là con của scope.
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;
});
Angular JS Custom Directives
Kết quả
Mở văn bảnAngularJS.htm trong trình duyệt web. Xem kết quả.
Ứng dụng mẫu AngularJS
Sinh viên: Mahesh Parashar , Roll No: 1
Sinh viên: Piyush Parashar , Roll No: 2
Tài liệu liên quan:
