Chỉ thị AngularJS

AngularJS cho phép bạn sử dụng tên gọi là “Hướng dẫncủa HTML bằng cách mở rộng thuộc tính mới.

AngularJS có một bộ lệnh tích hợp, có thể cung cấp các chức năng cho ứng dụng của bạn.

AngularJS_còn_phép Bạn định義_các_câu_lệnh_của_chính_Bạn.

Chỉ thị AngularJS

Câu_lệnh AngularJS là các thuộc_tính HTML_được_mở_rộng, có tiền tố ng-.

ng-app Câu_lệnh_khởi_tạo_ứng_động_ngôn_ngữ AngularJS.

ng-init Câu_lệnh_khởi_tạo_dữ_liệu_ứng_động_ngôn_ngữ.

ng-model Hướng dẫn sẽ gắn giá trị của các kiểm soát HTML (input, select, textarea) với dữ liệu ứng dụng.

Hãy_đọc_thông_tin_về_các_câu_lệnh AngularJS trong tài_liệu_tham_khảo AngularJS_của_chúng_ta.

một

<div ng-app="" ng-init="tên_ho_tên='Bill'">
<p>Tên: <input type="text" ng-model="tên_ho_tên"></p>
<p>Bạn_giải_thích: {{ tên_ho_tên }}</p>
</div>

Thử ngay

ng-app Câu_lệnh_còn_tell AngularJS rằng, phần_mục <div> là_chủ_thân_của ứng_động_ngôn_ngữ AngularJS.

giao_thức_dữ_liệu_biding

trong_ví_dụ_trước {{ tên_ho_tên }} Giá_trị_là_giá_trị_biding_dữ_liệu_trong AngularJS.

Giao_thức_dữ_liệu_biding trong AngularJS sẽ_khóa_trì AngularJS_giá_trị_với AngularJS_dữ_liệu.

{{ tên_ho_tên }} với ng-model="tên_ho_tên" được_khóa_trì_với_cả_hai

Trong ví_dụ_tiếp_theo, hai trường_text_văn_ba được_khóa_trì_với_cả_hai câu_lệnh ng-model:

một

<div ng-app="" ng-init="số_lượng=1;giá=5">
Số_lượng: <input type="number" ng-model="số_lượng">
Chi_phí:    <input type="number" ng-model="giá">
Tổng_số_theo_dollar: {{ số_lượng * giá }}
</div>

Thử ngay

Sử_dụng ng-init không_thường_gặp. Bạn sẽ học_cách_khởi_tạo_dữ_liệu trong chương_chAPTER về_khóa_trì

Lặp_lại_thuộc_tính HTML

ng-repeat Câu_lệnh_lặp_lại_thuộc_tính HTML:

một

<div ng-app="" ng-init="tên=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

Thử ngay

ng-repeat Câu_lệnh_thực_tế_sao_chép_mỗi_mục trong bộ_sưu_tậpsao_chép một lần phần_mục HTML.

được sử_dụng cho mảng đối_tượng ng-repeat Câu_lệnh:

một

<div ng-app="" ng-init="tên=['Jani','Hege','Kai']">
{tên:'Jani',quốc_gia:'Na Uy'},
{tên:'Hege',quốc_gia:'Thụy Điển'},
{name:'Kai',country:'Denmark'}]
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

Thử ngay

AngularJS rất phù hợp với các ứng dụng CRUD (tạo, đọc, cập nhật, xóa) cơ sở dữ liệu.

Giả sử nếu những đối tượng này là từ các bản ghi cơ sở dữ liệu.

Hướng dẫn ng-app

ng-app Hướng dẫn định nghĩaPhần tử gốc.

Khi tải trang web,ng-app Hướng dẫn sẽKhởi động tự độngTự động khởi tạo ứng dụng.

Hướng dẫn ng-init

ng-init Hướng dẫn định nghĩaGiá trị đầu tiên.

Thường thì bạn sẽ không sử dụng ng-init. Bạn sẽ thay thế bằng điều khiển hoặc mô-đun.

Sau này bạn sẽ tìm hiểu thêm về điều khiển và mô-đun.

Hướng dẫn ng-model

ng-model Hướng dẫn sẽ gắn giá trị của các kiểm soát HTML (input, select, textarea) với dữ liệu ứng dụng.

ng-model Hướng dẫn còn có thể:

  • Cung cấp việc 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 (hết hiệu lực, bẩn, đã chạm, lỗi)
  • Cung cấp lớp CSS cho phần tử HTML
  • Kết hợp phần tử HTML với biểu mẫu HTML

Đọc thêm về ng-model Thông tin hướng dẫn.

Tạo hướng dẫn mới

Ngoài tất cả các hướng dẫn内置 của AngularJS, bạn có thể tạo hướng dẫn của riêng mình.

Hướng dẫn mới được tạo ra bằng cách sử dụng .directive bởi hàm tạo.

Để gọi hướng dẫn mới, hãy tạo một phần tử HTML có tên thẻ trùng với tên hướng dẫn mới.

Khi đặt tên hướng dẫn, bạn phải sử dụng định dạng đệm mũw3TestDirectivenhưng khi gọi nó, bạn phải sử dụng tên được phân cách bằng dấu '-'w3-test-directive:

một

<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "<h1>Được tạo bởi chỉ thị!</h1>"
  });
});
</script>
</body>

Thử ngay

Bạn có thể gọi lệnh theo cách sau:

  • Tên phần tử
  • Thuộc tính
  • Loại
  • Ghi chú

Mọi ví dụ sau đây đều sẽ tạo ra kết quả tương tự:

Tên phần tử

<w3-test-directive></w3-test-directive>

Thử ngay

Thuộc tính

<div w3-test-directive></div>

Thử ngay

Loại

<div class="w3-test-directive"></div>

Thử ngay

Ghi chú

<!-- directive: w3-test-directive -->

Thử ngay

Giới hạn

Bạn có thể giới hạn chỉ thị của mình chỉ có thể được gọi bằng một số phương pháp nhất định.

một

bằng cách thêm giá trị "A" của restrict thuộc tính, chỉ thị này chỉ có thể được gọi thông qua thuộc tính:

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    restrict : "A",
    template : "<h1>Được tạo bởi chỉ thị!</h1>"
  });
});

Thử ngay

Giá trị hợp lệ của restrict là:

  • E biểu thị tên phần tử
  • A biểu thị thuộc tính
  • C biểu thị lớp
  • M biểu thị chú thích

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