AngularJS

Các Directive trong AngularJS

Posted on by HKT

AngularJS directive được sử dụng để mở rộng HTML. Có những thuộc tính đặc biệt bắt đầu với tiền tố ng-. Chúng ta sẽ thảo luận về những directive này:

  • ng-app – Directive để bắt đầu một ứng dụng AngularJS.
  • ng-init – Directive để khởi tạo dữ liệu cho ứng dụng.
  • ng-model – Directive này liên kết giá trị của dữ liệu ứng dụng AngularJS với các điều khiển đầu vào HTML.
  • ng-repeat – Directive lặp lại các phần tử HTML cho mỗi item trong một tập hợp.

Dưới đây chúng ta sẽ tìm hiểu chi tiết về các directive đã được đề cập bên trên.

Directive ng-app trong AngularJS

ng-app directive bắt đầu một ứng dụng AngularJS. Nó định nghĩa phần tử root. Nó tự động khởi tạo ứng dụng và khởi tạo ứng dựng web sử dụng AngularJS. Nó cũng được sử dụng để tải các module khác nhau của ứng dụng AngularJS. Ở các ví dụ tiếp theo, chúng ta định nghĩa một ứng dụng AngularJS mặc định sử dụng thuộc tính ng-app của một phần tử div.

<div ng-app="">
...
</div>

Directive ng-init trong AngularJS

ng-init khởi tạo các dữ liệu cho ứng dụng AngularJS. Nó được sử dụng để khởi tạo các giá trị cho một biến được sử dụng trong ứng dụng. Ở ví dụ dưới đây, chúng ta định nghĩa một mảng các Quốc gia. Chúng ta sử dụng cú pháp JSON để định nghĩa cho mảng các Quốc gia.

<div ng-app="" ng-init="cacquocgia=[{locale:'en-VN',ten:'Cong Hoa XHCN Viet Nam'},
                                    {locale:'en-GB',ten:'Vuong Quoc Anh'},
                                    {locale:'en-FR',ten:'Cong Hoa Phap'}]">
									
...
</div>

Directive ng-model trong AngularJS

ng-model directive định nghĩa các model/biến được sử dụng trong ứng dụng AngularJS. Ở trong ví dụ sau, chúng ta sẽ định nghĩa một model dưới tên “ten”.

<div ng-app="">
...
<p>Nhap ten cua ban: <input type="text" ng-model="ten"></p>
</div>

Directive ng-repeat trong AngularJS

ng-repeat directive lặp lại các phần tử HTML cho mỗi item trong một tập hợp. Ở ví dụ dưới đây, chúng ta sẽ duyệt qua một mảng các Quốc gia.

<div ng-app="">
...
   <p>Danh sach cac Quoc gia voi Locale tuong ung:</p>
   <ol>
      <li ng-repeat="quocgia in cacquocgia">
         {{ 'Quoc Gia: ' + quocgia.ten + ', Locale: ' + quocgia.locale }}
      </li>
   </ol>
</div>

Ví dụ ứng dụng AngularJS

Dưới đây là ví dụ mà bao gồm tất cả các directive mô tả bên trên:

vidudirective.html

<html>
   
   <head>
      <title>Directive trong AngularJS</title>
   </head>
   
   <body>
      <h1>Tao ung dung AngularJS</h1>
      
      <div ng-app = "" ng-init = "cacquocgia = [{locale:'en-VN',ten:'CH XHCN Viet Nam'}, {locale:'en-GB',ten:'Vuong Quoc Anh'}, {locale:'en-FR',ten:'Cong Hoa Phap'}]"> 
         <p>Nhap ten cua ban: <input type = "text" ng-model = "ten"></p>
         <p>Xin chao <span ng-bind = "ten"></span>!</p>
         <p>Danh sach cac quoc gia va locale tuong ung:</p>
      
         <ol>
            <li ng-repeat = "quocgia in cacquocgia">
               {{ 'Quoc Gia: ' + quocgia.ten + ', Locale: ' + quocgia.locale }}
            </li>
         </ol>
      </div>
      
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      
   </body>
</html>

Kết quả

Mở trang vidudirective.html trên trình duyệt, nhập tên của bạn và xem kết quả dưới đây.