Chỉ thị tùy chỉnh là gì?
Một chỉ thị tùy chỉnh trong Angular Js là một chỉ thị do người dùng xác định với chức năng mong muốn của bạn. Mặc dù AngularJS có rất nhiều chỉ thị mạnh mẽ, nhưng đôi khi cần có các chỉ thị tùy chỉnh.
Trong hướng dẫn này, bạn sẽ học-
- Cách tạo Chỉ thị tùy chỉnh?
- AngularJs Directives and Scopes
- Sử dụng bộ điều khiển có chỉ thị
- Cách tạo các chỉ thị có thể sử dụng lại
- AngularJS Chỉ thị và các thành phần - ng-transclude
- Các chỉ thị lồng nhau
- Xử lý các sự kiện trong một chỉ thị
Cách tạo Chỉ thị tùy chỉnh?
Hãy xem một ví dụ về cách chúng ta có thể tạo một chỉ thị tùy chỉnh.
Lệnh tùy chỉnh trong trường hợp của chúng tôi chỉ đơn giản là sẽ chèn một thẻ div có văn bản "Hướng dẫn AngularJS" trong trang của chúng tôi khi lệnh được gọi.
Event Registration Guru99 Global Event
Giải thích mã:
- Đầu tiên chúng tôi đang tạo một mô-đun cho ứng dụng góc cạnh của chúng tôi. Điều này là bắt buộc để tạo một chỉ thị tùy chỉnh vì chỉ thị sẽ được tạo bằng cách sử dụng mô-đun này.
- Bây giờ chúng tôi đang tạo một chỉ thị tùy chỉnh được gọi là "ngGuru" và xác định một hàm sẽ có mã tùy chỉnh cho chỉ thị của chúng tôi.
Ghi chú:-
Lưu ý rằng khi xác định chỉ thị, chúng tôi đã định nghĩa nó là ngGuru với chữ cái 'G' là viết hoa. Và khi chúng tôi truy cập nó từ thẻ div của chúng tôi như một chỉ thị, chúng tôi đang truy cập nó với tư cách ng-guru. Đây là cách góc hiểu các chỉ thị tùy chỉnh được xác định trong một ứng dụng. Đầu tiên tên của chỉ thị tùy chỉnh phải bắt đầu bằng các chữ cái 'ng'. Thứ hai, ký hiệu gạch nối '-' chỉ nên được đề cập khi gọi chỉ thị. Và thứ ba, chữ cái đầu tiên theo sau các chữ cái 'ng' khi xác định chỉ thị có thể là chữ thường hoặc chữ hoa.
- Chúng tôi đang sử dụng tham số mẫu, một tham số được xác định bởi Angular cho các chỉ thị tùy chỉnh. Trong điều này, chúng tôi đang xác định rằng bất cứ khi nào chỉ thị này được sử dụng, thì chỉ cần sử dụng giá trị của mẫu và đưa nó vào mã gọi.
- Ở đây, chúng tôi hiện đang sử dụng chỉ thị "ng-guru" được tạo tùy chỉnh của chúng tôi. Khi chúng tôi thực hiện việc này, giá trị chúng tôi đã xác định cho mẫu "Hướng dẫn JS Angular" bây giờ sẽ được đưa vào đây.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
- Kết quả ở trên cho thấy rõ ràng rằng chỉ thị ng-guru tùy chỉnh của chúng tôi, có mẫu được xác định để hiển thị văn bản tùy chỉnh được hiển thị trong trình duyệt.
AngularJs Directives and Scopes
Phạm vi được định nghĩa là chất keo gắn bộ điều khiển với chế độ xem bằng cách quản lý dữ liệu giữa chế độ xem và bộ điều khiển.
Khi tạo các chỉ thị AngularJs tùy chỉnh, chúng theo mặc định sẽ có quyền truy cập vào đối tượng phạm vi trong bộ điều khiển mẹ.
Bằng cách này, chỉ thị tùy chỉnh trở nên dễ dàng sử dụng dữ liệu được chuyển đến bộ điều khiển chính.
Hãy xem một ví dụ về cách chúng ta có thể sử dụng phạm vi của bộ điều khiển mẹ trong chỉ thị tùy chỉnh của chúng ta.
Event Registration Guru99 Global Event
Giải thích mã:
- Đầu tiên chúng ta tạo một bộ điều khiển có tên là "DemoController". Trong phần này, chúng tôi định nghĩa một biến có tên là tutorialName và gắn nó vào đối tượng scope trong một câu lệnh - $ scope.tutorialName = "AngularJS".
- Trong chỉ thị tùy chỉnh của chúng tôi, chúng tôi có thể gọi biến "tutorialName" bằng cách sử dụng một biểu thức. Biến này có thể truy cập được vì nó được định nghĩa trong bộ điều khiển "DemoController", biến này sẽ trở thành cha cho chỉ thị này.
- Chúng tôi tham chiếu bộ điều khiển trong thẻ div, thẻ này sẽ hoạt động như thẻ div mẹ của chúng tôi. Lưu ý rằng điều này cần được thực hiện trước để chỉ thị tùy chỉnh của chúng tôi có thể truy cập vào biến tutorialName.
- Cuối cùng, chúng tôi chỉ đính kèm chỉ thị tùy chỉnh "ng-guru" vào thẻ div của chúng tôi.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
- Kết quả ở trên cho thấy rõ ràng rằng chỉ thị tùy chỉnh "ng-guru" của chúng tôi sử dụng biến phạm vi tutorialName trong bộ điều khiển mẹ.
Sử dụng bộ điều khiển có chỉ thị
Angular cung cấp cho cơ sở để truy cập trực tiếp vào biến thành viên của bộ điều khiển từ các chỉ thị tùy chỉnh mà không cần đối tượng phạm vi.
Điều này đôi khi trở nên cần thiết vì trong một ứng dụng, bạn có thể có nhiều đối tượng phạm vi thuộc nhiều bộ điều khiển.
Vì vậy, có nhiều khả năng bạn có thể mắc lỗi khi truy cập nhầm đối tượng phạm vi của bộ điều khiển sai.
Trong kịch bản như vậy, có một cách để đề cập cụ thể rằng "Tôi muốn truy cập bộ điều khiển cụ thể này" từ chỉ thị của tôi.
Hãy xem một ví dụ về cách chúng ta có thể đạt được điều này.
Event Registration Guru99 Global Event
Giải thích mã:
- Đầu tiên chúng ta tạo một bộ điều khiển có tên là "DemoController". Trong phần này, chúng tôi sẽ định nghĩa một biến có tên là "tutorialName" và lần này thay vì gắn nó vào đối tượng phạm vi, chúng tôi sẽ gắn nó trực tiếp vào bộ điều khiển.
- Trong chỉ thị tùy chỉnh của chúng tôi, chúng tôi đang đề cập cụ thể rằng chúng tôi muốn sử dụng bộ điều khiển "DemoController" bằng cách sử dụng từ khóa tham số bộ điều khiển.
- Chúng tôi tạo một tham chiếu đến bộ điều khiển bằng cách sử dụng tham số "controllerAs". Điều này được định nghĩa bởi Angular và là cách để tham chiếu bộ điều khiển làm tham chiếu.
Lưu ý: - Có thể truy cập nhiều bộ điều khiển trong một chỉ thị bằng cách chỉ định các khối tương ứng của bộ điều khiển, controllerA và các câu lệnh mẫu.
- Cuối cùng, trong mẫu của chúng tôi, chúng tôi đang sử dụng tham chiếu được tạo ở bước 3 và sử dụng biến thành viên được gắn trực tiếp vào bộ điều khiển ở Bước 1.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
Kết quả đầu ra cho thấy rõ ràng rằng chỉ thị tùy chỉnh đang đặc biệt truy cập DemoController và biến thành viên tutorialName được đính kèm với nó và hiển thị văn bản "Angular".
Cách tạo các chỉ thị có thể sử dụng lại
Chúng ta đã thấy sức mạnh của các lệnh tùy chỉnh, nhưng chúng ta có thể đưa điều đó lên cấp độ tiếp theo bằng cách xây dựng các lệnh có thể sử dụng lại của riêng mình.
Ví dụ: giả sử chúng tôi muốn đưa mã luôn hiển thị các thẻ HTML bên dưới trên nhiều màn hình, về cơ bản chỉ là đầu vào cho "Tên" và "tuổi" của người dùng.
Để sử dụng lại chức năng này trên nhiều màn hình mà không cần mã hóa mỗi lần, chúng tôi tạo điều khiển chính hoặc chỉ thị ở dạng góc để giữ các điều khiển này ("Tên" và "tuổi" của người dùng).
Vì vậy, bây giờ, thay vì nhập cùng một mã cho màn hình bên dưới mọi lúc, chúng ta thực sự có thể nhúng mã này vào một chỉ thị và nhúng chỉ thị đó vào bất kỳ thời điểm nào.
Hãy xem một ví dụ về cách chúng ta có thể đạt được điều này.
Event Registration Guru99 Global Event
Giải thích mã:
- Trong đoạn mã của chúng tôi cho một chỉ thị tùy chỉnh, những gì thay đổi chỉ là giá trị được cấp cho thông số mẫu của chỉ thị tùy chỉnh của chúng tôi.
Thay vì thẻ hoặc văn bản kế hoạch năm, chúng tôi thực sự đang nhập toàn bộ phân đoạn của 2 điều khiển đầu vào cho "Tên" và "tuổi" cần được hiển thị trên trang của chúng tôi.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
Từ đầu ra ở trên, chúng ta có thể thấy rằng đoạn mã từ mẫu của chỉ thị tùy chỉnh được thêm vào trang.
AngularJS Chỉ thị và các thành phần - ng-transclude
Như chúng tôi đã đề cập trước đó, Angular có nghĩa là để mở rộng chức năng của HTML. Và chúng tôi đã thấy cách chúng tôi có thể chèn mã bằng cách sử dụng các chỉ thị có thể sử dụng lại tùy chỉnh.
Nhưng trong phát triển ứng dụng web hiện đại, cũng có một khái niệm về phát triển các thành phần web. Về cơ bản có nghĩa là tạo các thẻ HTML của riêng chúng tôi có thể được sử dụng như các thành phần trong mã của chúng tôi.
Do đó, góc cung cấp một mức sức mạnh khác để mở rộng các thẻ HTML bằng cách cho khả năng đưa các thuộc tính vào chính các thẻ HTML.
Điều này được thực hiện bởi thẻ " ng-transclude ", đây là một loại cài đặt để cho biết góc để nắm bắt mọi thứ được đưa vào bên trong chỉ thị trong đánh dấu.
Hãy lấy một ví dụ về cách chúng ta có thể đạt được điều này.
Event Registration Guru99 Global Event
Angular JS
Giải thích mã:
- Chúng tôi đang sử dụng chỉ thị để xác định thẻ HTML tùy chỉnh được gọi là 'ngăn' và thêm một hàm sẽ đặt một số mã tùy chỉnh cho thẻ này. Trong đầu ra, thẻ ngăn tùy chỉnh của chúng tôi sẽ hiển thị văn bản "AngularJS" trong một hình chữ nhật với đường viền màu đen đặc.
- Thuộc tính "transclude" phải được đề cập là true, thuộc tính này được yêu cầu bởi góc để đưa thẻ này vào DOM của chúng tôi.
- Trong phạm vi, chúng tôi đang xác định một thuộc tính tiêu đề. Các thuộc tính thường được định nghĩa dưới dạng các cặp tên / giá trị như: name = "value". Trong trường hợp của chúng tôi, tên của thuộc tính trong thẻ HTML ngăn của chúng tôi là "title". Biểu tượng "@" là yêu cầu từ góc cạnh. Điều này được thực hiện để khi dòng title = {{title}} được thực thi ở Bước 5, mã tùy chỉnh cho thuộc tính title sẽ được thêm vào thẻ HTML của ngăn.
- Mã tùy chỉnh cho các thuộc tính tiêu đề chỉ vẽ một đường viền màu đen đặc để chúng tôi kiểm soát.
- Cuối cùng, chúng tôi đang gọi thẻ HTML tùy chỉnh của mình cùng với thuộc tính title đã được xác định.
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong trình duyệt.
Đầu ra:
- Kết quả đầu ra cho thấy rõ ràng rằng thuộc tính tiêu đề của thẻ html5 ngăn đã được đặt thành giá trị tùy chỉnh của "Angular.JS".
Các chỉ thị lồng nhau
Các chỉ thị trong góc có thể được lồng vào nhau. Giống như chỉ các mô-đun hoặc chức năng bên trong trong bất kỳ ngôn ngữ lập trình nào, bạn có thể cần phải nhúng các chỉ thị vào bên trong nhau.
Bạn có thể hiểu rõ hơn về điều này bằng cách xem ví dụ dưới đây.
Trong ví dụ này, chúng tôi đang tạo 2 chỉ thị được gọi là "bên ngoài" và "bên trong".
- Chỉ thị bên trong hiển thị một văn bản được gọi là "Bên trong".
- Trong khi chỉ thị bên ngoài thực sự thực hiện lệnh gọi đến chỉ thị bên trong để hiển thị văn bản được gọi là "Bên trong".
Guru99 Global Event