JavaScript

AngularJS Directives

Rate this post

AngularJS tạo điều kiện cho bạn mở rộng HTML với các thuộc tính mới. Các thuộc tính này được gọi là chỉ thị.

Có một bộ chỉ thị tích hợp trong AngularJS cung cấp chức năng cho các ứng dụng của bạn. Bạn cũng có thể xác định các chỉ thị của riêng mình.

Các bài viết liên quan:

Directives là các thuộc tính đặc biệt bắt đầu bằng tiền tố ng-. Sau đây là các chỉ thị phổ biến nhất:

  • ng-app: Chỉ thị này khởi động Ứng dụng AngularJS.
  • ng-init: Chỉ thị này khởi tạo dữ liệu ứng dụng.
  • ng-model: Chỉ thị này xác định mô hình có thể thay đổi được sử dụng trong AngularJS.
  • ng-repeat: Lệnh này lặp lại các phần tử html cho mỗi mục trong một bộ sưu tập.
  1. Chỉ thị ng-app

Chỉ thị ng-app xác định phần tử gốc. Nó khởi động Ứng dụng AngularJS và tự động khởi tạo hoặc khởi động ứng dụng khi trang web chứa Ứng dụng AngularJS được tải. Nó cũng được sử dụng để tải các mô-đun AngularJS khác nhau trong Ứng dụng AngularJS.

Xem ví dụ này:

Trong ví dụ sau, chúng tôi đã xác định một ứng dụng AngularJS mặc định bằng cách sử dụng thuộc tính ng-app của một phần tử div.

< div ng-app  =  "" >   
   ...  
</ div >
  1. Chỉ thị ng-model:

Chỉ thị ng-model xác định mô hình / biến được sử dụng trong Ứng dụng AngularJS.

Trong ví dụ sau, chúng tôi đã xác định một mô hình có tên “name”.

< div ng-app  =  "" >   
   ...  
   < p > Nhập Tên của bạn:  < input type  =  "text" ng-model  =  "name" > </ p >    
</ div >
  1. Chỉ thị ng-repeat

Chỉ thị ng-repeat lặp lại các phần tử html cho mỗi mục trong một bộ sưu tập. Trong ví dụ sau, chúng tôi đã lặp lại một loạt các quốc gia.

< div ng-app  =  "" >   
   ...  
   < p > Danh sách ngôn ngữ của các quốc gia: </ p >  
     
   < ol >  
      < li ng-repeat  =  "quốc gia trong các quốc gia" >   
         {{'Quốc gia:' + country.name + ', Ngôn ngữ:' + country.locale}}  
      </ li >  
   </ ol >  
 </div>

Ví dụ về chỉ thị AngularJS

Hãy lấy một ví dụ để sử dụng tất cả các lệnh đã thảo luận ở trên:

<!DOCTYPE html>  
<html>  
<head>  
      <title>AngularJS Directives</title>  
</head>  
<body>  
      <h1>Sample Application</h1>  
        
      <div ng-app = "" ng-init = "countries = [{locale:'en-IND',name:'India'}, {locale:'en-PAK',name:'Pakistan'}, {locale:'en-AUS',name:'Australia'}]">   
         <p>Nhập tên của bạn:
<input type = "text" ng-model = "name"></p>  
         <p>Xin chào <span ng-bind = "name"></span>!</p>  
         <p>Danh sách ngôn ngữ của các quốc gia:</p>  
        
         <ol>  
            <li ng-repeat = "country in countries">  
               {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}  
            </li>  
         </ol>  
      </div>  
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>  
</body>  
</html>

Danh sách chỉ thị AngularJS

Các chỉ thị AnglarJS được sử dụng để thêm chức năng vào ứng dụng của bạn. Bạn cũng có thể thêm các chỉ thị của riêng mình cho các ứng dụng của bạn.

Sau đây là danh sách các chỉ thị AngularJS:

Chỉ thịSự miêu tả
ng-appNó xác định phần tử gốc của một ứng dụng.
ng-bindNó liên kết nội dung của một phần tử html với dữ liệu ứng dụng.
ng-bind-htmlNó liên kết HTML bên trong của một phần tử HTML với dữ liệu ứng dụng và cũng loại bỏ mã nguy hiểm khỏi chuỗi html.
ng-bind-templateNó chỉ định rằng nội dung văn bản nên được thay thế bằng một mẫu.
ng-blurNó chỉ định một hành vi trên các sự kiện mờ.
ng-changeNó chỉ định một expressions để đánh giá khi người dùng thay đổi nội dung.
ng-checkedNó chỉ định xem một phần tử có được chọn hay không.
ng-classNó chỉ định các lớp css trên các phần tử html.
ng-class-evenNó giống như ng-class, nhưng sẽ chỉ có hiệu lực trên các hàng chẵn.
ng-class-oddNó giống như ng-class, nhưng sẽ chỉ có hiệu lực trên các hàng lẻ.
ng-clickNó chỉ định một expressions để đánh giá khi một phần tử đang được nhấp vào.
ng-cloakNó ngăn chặn hiện tượng nhấp nháy khi ứng dụng của bạn đang được tải.
ng-controllerNó xác định đối tượng điều khiển cho một ứng dụng.
ng-copyNó chỉ định một hành vi trên các sự kiện sao chép.
ng-cspNó thay đổi chính sách bảo mật nội dung.
ng-cutNó chỉ định một hành vi trên các sự kiện cắt.
ng-dblclickNó chỉ định một hành vi trên các sự kiện nhấp đúp.
ng-focusNó chỉ định một hành vi trên các sự kiện tiêu điểm.
ng-hideNó ẩn hoặc hiển thị các phần tử html.
ng-hrefNó chỉ định một URL cho phần tử <a>.
ng-ifNó loại bỏ phần tử html nếu một điều kiện là sai.
ng-includeNó bao gồm html trong một ứng dụng.
ng-initNó xác định các giá trị ban đầu cho một ứng dụng.
ng-jqNó chỉ định rằng ứng dụng phải sử dụng một thư viện, như jQuery.
ng-keydownNó chỉ định một hành vi trên các sự kiện keydown.
ng-keypressNó chỉ định một hành vi trên các sự kiện nhấn phím.
ng-keyupNó chỉ định một hành vi trên các sự kiện keyup.
ng-listNó chuyển đổi văn bản thành một danh sách (mảng).
ng-openNó chỉ định thuộc tính mở của một phần tử.
ng-optionsNó chỉ định <options> trong danh sách <select>.
ng-pasteNó chỉ định một hành vi trên các sự kiện dán.
ng-pluralizeNó chỉ định một thông báo để hiển thị theo các quy tắc bản địa hóa của en-us.
ng-readonlyNó chỉ định thuộc tính chỉ đọc của một phần tử.
ng-requiredNó chỉ định thuộc tính bắt buộc của một phần tử.
ng-selectedNó chỉ định thuộc tính đã chọn của một phần tử.
ng-showNó hiển thị hoặc ẩn các phần tử html.
ng-srcNó chỉ định thuộc tính src cho phần tử <img>.
ng-srcsetNó chỉ định thuộc tính srcset cho phần tử <img>.
ng-styleNó chỉ định thuộc tính style cho một phần tử.
ng-submitNó chỉ định các expressions để chạy trên các sự kiện gửi trực tiếp.
ng-switchNó chỉ định một điều kiện sẽ được sử dụng để hiển thị / ẩn các phần tử con.
ng-transcludeNó chỉ định một điểm để chèn các phần tử đã loại trừ.
ng-valueNó chỉ định giá trị của một phần tử đầu vào.
ng-disabledNó chỉ định xem một phần tử có bị vô hiệu hóa hay không.
ng-formNó chỉ định một biểu mẫu html để kế thừa các điều khiển từ đó.
ng-modelNó liên kết giá trị của các điều khiển html với dữ liệu ứng dụng.
ng-model-optionsNó chỉ định cách các cập nhật trong mô hình được thực hiện.
ng-mousedownNó chỉ định một hành vi trên các sự kiện mousedown.
ng-mouseenterNó chỉ định một hành vi trên các sự kiện của mouseenter.
ng-mouseleaveNó chỉ định một hành vi trên các sự kiện mouseleave.
ng-mousemoveNó chỉ định một hành vi trên các sự kiện di chuyển chuột.
ng-mouseoverNó chỉ định một hành vi trên các sự kiện di chuột qua.
ng-mouseupNó chỉ định một hành vi trên các sự kiện mouseup.
ng-non-bindableNó chỉ định rằng không có ràng buộc dữ liệu nào có thể xảy ra trong phần tử này hoặc đó là phần tử con.
ng-repeatNó xác định một mẫu cho mỗi dữ liệu trong một bộ sưu tập.

Cách thêm chỉ thị

Xem ví dụ này:

<!DOCTYPE html>  
<html>  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<body>  
  
<div ng-app="myApp" w3-test-directive></div>  
<script>  
var app = angular.module("myApp", []);  
app.directive("w3TestDirective", function() {  
    return {  
        template : "Đây là một hàm tạo chỉ thị"  
    };  
});  
</script>  
</body>  
</html>

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now