[AngularJS] Phần 4: Các chỉ thị trong AngularJS

294 lượt xem

AngularJS cho phép mở rộng HTML bằng thuộc tính mới gọi là chỉ thị (directive). AngularJS chứa 1 tập các chỉ thị được tích hợp sẵn cho phép thực hiện các chức năng với các ứng dụng. AngularJS cũng cho phép bạn tự định nghĩa các chỉ thị của riêng mình.

Chỉ thị AngularJS
Chỉ thị AngularJS được mở rộng bằng các thuộc tính HTML với tiền tố ng-.

Chỉ thị ng-app dùng để khởi tạo 1 ứng dụng AngularJS.
Chỉ thị ng-init dùng để khởi tạo 1 dữ liệu ứng dụng.
Chỉ thị ng-model trói giá trị của các điều khiển HTML (input, select, textarea) với dữ liệu ứng dụng.

Ví dụ sau khai báo dữ liệu ứng dụng firstName=’Dammio’ và xuất tên này ra 1 textbox và giao diện.

<div ng-app="" ng-init="firstName='Dammio'">

<p>Tên: <input type="text" ng-model="firstName"></p>
<p>Tên: {{ firstName }}</p>

</div>

Chỉ thị ng-app cho AngularJS biết phần tử <div> là phần tử “sở hữu” của ứng dụng AngularJS.

Trói dữ liệu
Diễn giải {{ firstName }}, trong ví dụ trên, là 1 diễn giải trói dữ liệu trong AngularJS. Trói dữ liệu trong AngularJS được dùng để gắn các diễn giải với dữ liệu. Chẳng hạn, diễn giải {{ firstName }} được gắn với ng-model=”firstName”.

Ví dụ sau mô tả 2 trường văn bản được trói cùng nhau với 2 chỉ thị ng-model.

<div ng-app="" ng-init="quantity=1;price=5">

Số lượng: <input type="number" ng-model="quantity">
Giá:    <input type="number" ng-model="price">

Tổng tiền: {{ quantity * price }} USD

</div>

Dùng ng-init không phải là cách phổ biến. Bạn sẽ học cách khởi tạo dữ liệu trong phần này bằng các điều khiển (controller).

Các phần tử HTML lặp
Chỉ thị ng-repeat cho phép lặp 1 phần tử HTML. Ví dụ sau lặp từng phần tử trong danh sách tên (names).

<div ng-app="" ng-init="names=['Dammio','John','Nich']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

Chỉ thị ng-repeat thật ra là nhân bản các phần tử HTML cho mỗi phần tử trong danh sách.

Chỉ thị ng-repeat được dùng trên 1 mảng đối tượng được thể hiện thông qua ví dụ sau.

<div ng-app="" ng-init="names=[
{name:'Dammio',country:'Vietnam'},
{name:'John',country:'Japan'},
{name:'Mike',country:'USA'}]">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

Chỉ thị ng-app
Chỉ thị ng-app định nghĩa phần tử gốc của 1 ứng dụng AngularJS. Chỉ thị ng-app sẽ tự động khởi tạo ứng dụng khi trang web được tải lên.

Chỉ thị ng-init
Chỉ thị này định nghĩa các giá trị khởi tạo cho ứng dụng. Thông thường, chúng ta sẽ không dùng ng-init mà dùng 1 điều khiển hoặc 1 module.

Chỉ thị ng-model
Chỉ thị ng-model trói giá trị của các điều khiển HTML (input, select, textarea) vào dữ liệu ứng dụng. Chỉ thị ng-model cũng:

  • Cung cấp dạng chúng thực dữ liệu (number, email, required)
  • Cung cấp trạng thái dữ liệu (invalid, dirty, touched, error
  • Cung cấp các lớp CSS cho các phần tử HTML
  • Trói phần tử HTML vào các form HTML

Tạo các chỉ thị mới
Chúng ta có thể tạo chỉ thị với tên mới trong AngularJS. Các chỉ thị mới được tạo bằng cách dùng hàm .directive. Để chạy 1 chỉ thị mới, 1 phần tử HTML phải có cùng tên với chỉ thị mới này. Khi đặt tên cho chỉ thị mới, chúng ta nên dùng tên viết liền nhau, mỗi từ viết hoa trừ từ đầu tiên, và khi thực thi, tách rời các từ bằng dấu gạch ngang – và viết thường. Ví dụ như: dammioCom –> dammio-com.

<body ng-app="myApp">

<dammio-com></dammio-com>

<script>
var app = angular.module("myApp", []);
app.directive("dammioCom", function() {
    return {
        template : "<h1>Dữ liệu chỉ thị mới dammio-com</h1>"
    };
});
</script>

</body>

Chúng ta có thể dùng chỉ thị mới thông qua tên phần tử, thuộc tính, lớp và chú thích. Các ví dụ sau trả về cùng 1 kết quả:

Phần tử:

<dammio-com></dammio-com>

Thuộc tính:

<div dammio-com></div>

Lớp:

<div class="dammio-com"></div>

Chú thích:

<!-- directive: dammio-com -->

Restriction
Bạn có thể giới hạn các chỉ thị chỉ dành cho 1 số phương thức. Bằng cách thêm 1 thuộc tính giới hạn vào giá trị “A”, chỉ thị chỉ có thể được gọi bởi các thuộc tính:

var app = angular.module("myApp", []);
app.directive("dammioCom", function() {
    return {
        restrict : "A",
        template : "<h1>Chỉ có thể gọi các thuộc tính với chỉ thị dammioCom!</h1>"
    };
});

Một số giá trị giới hạn hợp lệ là:

  • E là tên phần tử
  • A là thuộc tính
  • C là lớp
  • M là chú thích (comment)

Mặc định giá trị là EA, nghĩa là tên phần tử và thuộc tính có thể gọi chỉ thị.

Kết luận: Trong bài này bạn đã học được các chỉ thị chính trong AngularJS và cách dùng các chỉ thị này để tạo 1 số ví dụ cơ bản. Ngoài ra, còn rất nhiều chỉ thị khác, mời bạn tự nghiên cứu thêm.

Bình luận Facebook

Để lại bình luận

2 Comments on "[AngularJS] Phần 4: Các chỉ thị trong AngularJS"

Notify of
avatar
1000
Sort by:   newest | oldest | most voted
wpDiscuz