Web Design

Angularjs, Bài 8: Giới thiệu về ngClick, ngMouse và ngSubmit

Sau khi đã rành rẽ với các directives về dữ liệu như ngRepeat, ngShow, ngClass, ngSrc và ngHref, chúng ta sẽ đổ bộ sang các directives về events.

AngularJS

1. ngClick

Có thể nói đây là event directive quan trọng nhất vì khi tương tác với các ứng dụng thì hoạt động click chuột hoặc chạm nhanh vào màn hình trên các màn hình cảm ứng là phổ biến nhất. Nói nôm na, súc tích, thì directive này tương ứng với onclick của Javascript cơ bản, tương tự như ngHref đối với href hay ngSrc với src vậy.

Trong trường hợp đơn giản nhất, bạn có thể code luôn event này trong HTML cơ bản luôn. Chẳng hạn, khi tôi click vào một trong hai <button> thì màu chữ của <p> sẽ thay đổi tương ứng:

Tuy nhiên, trên thực tế thì ít khi, nếu muốn nói là không có, một ứng dụng web chỉ có click events mang tính cơ bản như vậy. Bây giờ, giả sử bây giờ, tôi muốn sau khi click vào <button> nào, ngoài việc màu chữ của <p> thay đổi thì <button> đó cũng mất luôn. Tất nhiên, bạn có thể dùng ngHide ở đây, nhưng tôi sẽ thực hiện trong phần Javascript theo hướng “bài bản” nhất. Vì tính năng của hai <button> là gần như giống nhau, tôi chỉ đặt một function duy nhất.

1.1. ngClick chứa param là MouseEvent:

Trước hết, các bạn hãy cùng tôi log click event của button được click ra:

Và bạn chỉ cần gán tên function kèm tham số $event (lưu ý dấu dollar) vào attr ng-click của <button> như tôi làm bên dưới:

Khi nhìn vào console thì bạn sẽ nhận thấy nó chỉ là một MouseEvent hoàn toàn bình thường. Và thực chất nó cũng đâu có gì là đặc biệt. Nó chỉ là MouseEvent của Javascript cơ bản mà thôi. Bây giờ, để chuyển việc thao tác với ng-model=”color” sang phần Javascript, tôi chỉ đơn giản là code vài dòng như bên dưới. Đối với các bạn chắc chắn phần Javascript thì sẽ chỉ mất vài giây để hiểu:

Ở đây, tôi “không thèm” dùng ngShow hay ngHide để ẩn hiện element mà thay vào đó, tôi lại dùng Javascript cơ bản. Và ở đây thì tôi thực lòng khuyên các bạn chỉ nên sử dụng jQuery khi bạn nắm rõ nó cũng như cảm thấy jQuery sẽ giúp bạn đơn giản hóa, tinh gọn hóa trang code đi được 25% trở lên. Còn nếu các bạn chỉ dùng jQuery ở mức getElement(s) thì tốt nhất là bạn dùng Javascript cơ bản giùm. Rất nhiều, rất nhiều các bạn thích dùng jQuery chỉ vì “thấy người khác dùng” và gây sai code đáng kể, đặc biệt là các bạn dùng jQuery dưới dạng CDN. Nếu jQuery chưa được tải về xong mà phần <script> của các bạn đã bắt đầu chạy là bạn toi ngay.

Tới đây thì tôi kết thúc phần ngClick. Và bạn lưu ý một điều trước khi sang phần tiếp theo: Chỉ nên dùng ng-click khi bạn có “động chạm” tới ng-model. Còn nếu không “dính dáng” tới ng-model thì bạn cứ dùng Javascript cơ bản cho đơn giản và thanh thản, mặc kệ ai ngăn cản và nó đang nằm trong ng-controller nào. Ngoài ra thì ngClick có một tên “anh em cùng ông nội và cùng cha” là ngDblclick. Tên này sẽ được gọi khi bạn double click vào một element.

1.2. ngClick chứa param tùy bạn định nghĩa:

Bây giờ, thay vì dùng $event thì tôi truyền tên biến muốn dùng làm param cho ng-click. Lần này, như bạn sắp thấy, là không có dấu $, và bạn cũng có thể truyền luôn một ngModel vào làm param cũng được. Về phần truyền ngModel làm param nó cũng tương tự như ngSubmit nên tôi sẽ chỉ nói với ngSubmit ở dưới và bạn có thể áp dụng với ngClick với cùng hướng tư duy:

Và tôi cũng thay đổi function onButtonClick lại cho tương ứng. Lần này thì mọi chuyện dễ hơn nhiều vì tham số là cố định và có sẵn, không cần thiết phải lấy từ textContent của element nữa.

2. ngMouse

Ở đây không phải là một directive duy nhất, từ ngMouse tôi dùng ở đây gồm các directives sau: ngMouseenter, ngMouseleave, ngMousemove, ngMouseover, ngMouseup. Nếu bạn đổi “ng” thành “on” thì sẽ ra các functions tương ứng của Javascript cơ bản. Cách sử dụng thì không khác gì ngClick cho lắm nên tôi nghĩ bạn sẽ dễ dàng thao tác được với nó mà không cần hướng dẫn.

3. ngSubmit

Đúng như cảm giác của bạn, tên này được dùng để thay thế submit event của một form để tận dụng thế mạnh của ngModel. Theo nguyên lí của Chủ nghĩa Mác Lenin là sự thống nhất của thế giới quan duy vật biện chứng và phương pháp luận biện chứng duy vật, theo lối suy luận từ sáu cặp phạm trù, thì sự ra đời của nó là một tất yếu khách quan, với nguyên do cũng giống như ngSrc hay ngHref, khi dùng ngModel với các attr gốc của HTML/JS sẽ gây ra hiện tượng nắng mưa, khi được khi không.

Bây giờ tôi sẽ bỏ mấy cái button trong phần HTML bên trên ra, chỉ còn một thẻ <p>, thêm vào một form mới có một text <input> và submit <input> với mục đích là để khi submit thì <p> sẽ thêm CSS class được viết trong text <input>. Và cùng với đó là một vài điều chỉnh về CSS:

Đúng như bạn đang nghĩ, tôi đang sử dụng ngClass dưới dạng Array. Nếu bạn chưa hiểu rõ về ngClass dưới dạng Array, bạn có thể tham khảo bài về ngClass, hoặc ở đây bạn có thể hiểu nhanh và đơn giản là mỗi item trong array của ngClass là một CSS class mà thôi. Bây giờ, ta sang phần JS và tôi tin bạn sẽ không mất nhiều thời gian để hiểu vài dòng cỏn con bên dưới:

Bạn có thể nhận thấy là tôi truyền luôn một ngModel làm param cho function addClass(klazz) của ngSubmit. Bạn có thể áp dụng tương tự cho ngClick với param là một ngModel. Khá đơn giản và hiệu quả phải không?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.