AngularJS: Chỉ thị trong AngularJS
Giải phóng thời gian, khai phóng năng lực
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ị (Directive).
AngularJS có một bộ các chỉ thị được xây dựng sẵn với các tác dụng tương ứng cho các ứng dụng của bạn.
AngularJS cũng cho phép bạn tự định nghĩa các chỉ thị của riêng bạn.
Chỉ thị trong AngularJS
Các chỉ thị AngularJS được dùng để mở rộng các thuộc tính HTML với tiền tố ng-.
Chỉ thị ng-app khởi tạo một ứng dụng AngularJS.
Chỉ thị ng-init khởi tạo dữ liệu ứng dụng.
Chỉ thị ng-model kết hợp giá trị của các điều khiển HTML (input, select, textarea) với dữ liệu ứng dụng.
Thí dụ
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{firstName}}</p>
</div>
Chỉ thị ng-app
của AngularJS sẽ thông báo rằng thẻ <div> là chủ sở hữu của ứng dụng AngularJS.
Liên kết dữ liệu
Biểu thức {{firstName}}
trong ví dụ ở trên là một biểu thức liên kết dữ liệu của AngularJS.
AngularJS sẽ liên kết các biểu thức AngularJS với dữ liệu AngularJS.
{{firstName}}
tương ứng với ng-model="firstName"
.
Trong ví dụ tiếp theo đây hai trường văn bản cùng được đặt một loại chỉ thị ng-model:
Ví dụ
<div ng-app="" ng-init="quantity=1;price=5">
Số lượng: <input type="number" ng-model="quantity">
<br>
Giá: <input type="number" ng-model="price">
Thành tiền: {{quantity * price}}
</div>
Việc sử dụng ng-init
là không phổ biến, ta nên dùng cách khác để khởi tạo dữ liệu trong bài viết về controller.
Lặp các phần tử HTML
Chỉ thị ng-repeat
sẽ lặp 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>
Chỉ thị ng-repeat
thực ra dùng để nhân bản các phần tử HTML một lần cho mỗi mục trong tập hợp.
Chỉ thị ng-repeat
được sử dụng trên một mảng các đố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>
AngularJS rất tuyệt vời với các ứng dụng cơ sở dữ liệu CRUD (Create Read Update Delete).
Chỉ cần tưởng tượng điều gì sẽ xảy ra nếu những đối tượng này được lưu vào một database.
Chỉ thị ng-app
Chỉ thị ng-app
dùng để xác định phần tử gốc của một ứng dụng AngularJS.
Chỉ thị ng-app
sẽ auto-bootstrap (tự khởi động) ứng dụng khi trang web được load.
Chỉ thị ng-init
Chỉ thị ng-init
dùng để xác định các giá trị khởi tạo cho ứng dụng AngularJS.
Thông thường thì bạn sẽ không sử dụng chỉ thị ng-init, thay vào đó bạn sẽ dùng một controller hoặc một module để thay thế.
Chỉ thị ng-model
Chỉ thị ng-model kết hợp giá trị của các điều khiển HTML (input, select, textarea) với dữ liệu ứng dụng.
Chỉ thị ng-model cũng có thể:
- Cung cấp xác nhận kiểu cho dữ liệu ứng dụng (number, email, required).
- Cung cấp trạng thái cho dữ liệu ứng dụng (không hợp lệ, lỗi).
- Cung cấp các lớp CSS cho các phần tử HTML.
- Liên kết phần tử HTML với các hình thức HTML.
Tạo các chỉ thị mới
Ngoài tất cả các chỉ thị AngularJS có sẵn, bạn có thể tạo các chỉ thị riêng của mình.
Các chỉ thị mới được tạo ra bằng cách sử dụng hàm .directive().
Để gọi ra chỉ thị mới, hãy tạo một phần tử HTML có cùng tên thẻ với chỉ thị mới.
Khi đặt tên cho một chỉ thị, bạn phải sử dụng phương pháp đặt theo kiểu lạc đà (V1Study chẳng hạn), nhưng khi gọi nó, bạn phải sử dụng tên riêng (v1-study chẳng hạn):
Thí dụ
<body ng-app="myApp">
<v1-study></v1-study>
<script>
var app = angular.module("myApp", []);
app.directive("V1Study", function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
Bạn có thể gọi một thư mục bằng cách sử dụng:
- Tên phần tử
- Thuộc tính
- Lớp
- Chú thích
Các ví dụ dưới đây sẽ tạo ra cùng một kết quả:
Tên phần tử
<v1-study></v1-study>
Thuộc tính
<div v1-study></div>
Lớp
<div class="v1-study"></div>
Chú thích
<!-- directive: v1-study -->
Hạn chế
Bạn có thể hạn chế những chỉ thị của bạn để chỉ có thể được gọi bởi một số phương thức.
Ví dụ
Bằng cách thêm một thuộc tính restrict
với giá trị "A"
, chỉ thị chỉ có thể được gọi bởi những thuộc tính (Atribute):
var app = angular.module("myApp", []);
app.directive("V1Study", function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
Những hạn chế phổ biến áp dụng cho chỉ thị:
E
là tên phần tử (Element)A
là thuộc tính (Attribute)C
là lớp (Class)M
là chú thích (comMent)
Theo mặc định thì giá trị hạn chế là EA
, tức là chỉ thị được gọi thông qua tên phần tử và thuộc tính.
Giải phóng thời gian, khai phóng năng lực