Chỉ thị AngularJS
AngularJS cho phép bạn mở rộng HTML với các thuộc tính mới gọi là Chỉ thị .
AngularJS có một bộ chỉ thị tích hợp cung cấp chức năng cho ứng dụng của bạn.
AngularJS cũng cho phép bạn xác định các chỉ thị của riêng mình.
Chỉ thị AngularJS
Các lệnh AngularJS là các thuộc tính HTML mở rộng có tiền tố ng- .
Lệnh ng-app khởi tạo ứng dụng AngularJS.
Lệnh ng-init khởi tạo dữ liệu ứng dụng.
Lệnh ng-model liên kết giá trị của các điều khiển HTML (đầu vào, chọn, vùng văn bản) với dữ liệu ứng dụng.
Đọc về tất cả các chỉ thị AngularJS trong tài liệu tham khảo chỉ thị AngularJS của chúng tôi.
Ví dụ
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
Hãy tự mình thử » Lệnh ng-app cũng cho AngularJS biết rằng phần tử <div> là "chủ sở hữu" của ứng dụng AngularJS.
Ràng buộc dữ liệu
Biểu thức {{ firstName }} , trong ví dụ trên, là biểu thức liên kết dữ liệu AngularJS.
Liên kết dữ liệu trong AngularJS liên kết các biểu thức AngularJS với dữ liệu AngularJS.
{{ firstName }} được liên kết với ng-model="firstName" .
Trong ví dụ tiếp theo, hai trường văn bản được liên kết với nhau bằng hai lệnh ng-model:
Ví dụ
<div ng-app="" ng-init="quantity=1;price=5">
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div> Hãy tự mình thử » Sử dụng ng-init không phổ biến lắm. Bạn sẽ học cách khởi tạo dữ liệu trong chương về bộ điều khiển.
Lặp lại các phần tử HTML
Lệnh ng-repeat lặp lại một phần tử HTML:
Ví dụ
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
Hãy tự mình thử » Lệnh ng-repeat thực sự sao chép các phần tử HTML một lần cho mỗi mục trong bộ sưu tập.
Lệnh ng-repeat được sử dụng trên một mảng đối tượng:
Ví dụ
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
Hãy tự mình thử » AngularJS hoàn hảo cho các ứng dụng CRUD (Tạo đọc cập nhật xóa) cơ sở dữ liệu.
Hãy tưởng tượng nếu những đối tượng này là bản ghi từ cơ sở dữ liệu.
Chỉ thị ng-app
Lệnh ng-app xác định phần tử gốc của ứng dụng AngularJS.
Lệnh ng-app sẽ auto-bootstrap (tự động khởi tạo) ứng dụng khi một trang web được tải.
Chỉ thị ng-init
Lệnh ng-init xác định các giá trị ban đầu cho ứ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.
Bạn sẽ tìm hiểu thêm về bộ điều khiển và mô-đun sau.
Chỉ thị ng-model
Lệnh ng-model liên kết giá trị của các điều khiển HTML (đầu vào, chọn, vùng văn bản) với dữ liệu ứng dụng.
Lệnh ng-model cũng có thể:
- Cung cấp xác thực 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.
Đọc thêm về lệnh ng-model trong chương tiếp theo.
Tạo chỉ thị mới
Ngoài tất cả các lệnh AngularJS tích hợp sẵn, bạn có thể tạo các lệnh của riêng mình.
Các lệnh mới được tạo bằng cách sử dụng hàm .directive .
Để gọi lệnh mới, hãy tạo một phần tử HTML có cùng tên thẻ với lệnh mới.
Khi đặt tên cho một lệnh, bạn phải sử dụng tên dạng lạc đà, w3TestDirective , nhưng khi gọi nó, bạn phải sử dụng - tên riêng biệt, w3-test-directive :
Ví dụ
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
Hãy tự mình thử »Bạn có thể gọi một lệnh bằng cách sử dụng:
- Tên phần tử
- Thuộc tính
- Lớp học
- Bình luận
Các ví dụ dưới đây đều sẽ tạo ra kết quả tương tự:
Những hạn chế
Bạn có thể hạn chế các lệnh của mình chỉ được gọi bằng một số phương thức.
Ví dụ
Bằng cách thêm thuộc tính restrict có giá trị "A" , lệnh này chỉ có thể được gọi bởi các thuộc tính:
var app = angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
Hãy tự mình thử »Các giá trị giới hạn pháp lý là:
-
Echo tên phần tử -
Acho thuộc tính -
Ccho lớp -
Mcho bình luận
Theo mặc định, giá trị là EA , nghĩa là cả tên Thành phần và tên thuộc tính đều có thể gọi lệnh.
