Làm thế nào để truyền đối tượng sự kiện click vào trình xử lý?

Truyền biến `$event` đã được dành riêng, ví dụ như `ng-click="handle($event)`. Sau đó, bộ điều khiển sẽ nhận được sự kiện gốc và có thể đọc mục tiêu, tọa độ hoặc gọi `preventDefault`.

Chỉ thị ng-click, ng-show & ng-hide của AngularJS

⚡ Tóm tắt thông minh

Sự kiện trong AngularJS cho phép ứng dụng web phản hồi các thao tác nhập liệu của người dùng như nhấp chuột, nhấn phím và di chuột. Các chỉ thị như ng-click, ng-show và ng-hide liên kết hành vi đó một cách khai báo trong mã HTML thay vì thông qua các trình lắng nghe DOM thủ công.

🖱️ Xử lý sự kiện nhấp chuột: ng-click gắn một biểu thức hoặc hàm điều khiển vào một phần tử, thường là một nút bấm.
🇧🇷 Hiển thị có điều kiện: ng-show hiển thị một phần tử khi biểu thức của nó đúng, trong khi ng-hide loại bỏ nó khi biểu thức đó đúng.
🎨 cơ chế: Cả hai chỉ thị đều bật/tắt lớp CSS tích hợp sẵn ng-hide, lớp này đặt thuộc tính display thành none, do đó phần tử vẫn tồn tại trong DOM.
🔗 Ràng buộc phạm vi: Biến thành viên được đặt trên `$scope` quyết định khả năng hiển thị, và việc thay đổi biến này bên trong một hàm xử lý sẽ cập nhật giao diện ngay lập tức.
📋 Phạm vi chỉ thị: Mười tám chỉ thị cho người nghe bao gồm các sự kiện làm mờ, thay đổi, lấy nét, bàn phím, chuột, dán và gửi.
⚠️ Trạng thái hỗ trợ: AngularJS đã hết hạn hỗ trợ vào ngày 31 tháng 12 năm 2021, vì vậy các dự án mới nên nhắm đến Angular phiên bản hiện đại hơn.

Đọc thêm

Sự kiện AngularJS

Sự kiện AngularJS Các sự kiện là những chức năng cho phép các ứng dụng web tương tác với các thao tác nhập liệu của người dùng như nhấp chuột, nhập liệu từ bàn phím và di chuột. Các sự kiện phải được xử lý trong các ứng dụng web để thực hiện các tác vụ và hành động cụ thể, và mỗi sự kiện được kích hoạt khi người dùng thực hiện hành động tương ứng.

Khi tạo ứng dụng web, sớm muộn gì ứng dụng của bạn cũng cần xử lý các sự kiện DOM như nhấp chuột và di chuyển chuột, nhấn phím và các sự kiện thay đổi. AngularJS Cung cấp các chỉ thị xử lý các sự kiện này một cách khai báo.

Ví dụ, nếu một nút trên trang cần xử lý một thao tác nào đó khi được nhấp chuột, chỉ thị sự kiện ng-click sẽ cung cấp hook đó.

⚠️ Thông báo hỗ trợ: AngularJS đã đạt đến Hết hạn sử dụng vào ngày 31 tháng 12 năm 2021. và không nhận được thêm bất kỳ bản vá lỗi hoặc bản sửa lỗi bảo mật nào từ nhóm Angular. Các chỉ thị bên dưới vẫn chính xác để duy trì các ứng dụng AngularJS 1.x hiện có; đối với các dự án mới, hãy sử dụng các chỉ thị hiện đại. có góc cạnh, trong đó các chỉ thị này được thay thế bằng các liên kết sự kiện như sau: (click) và bởi *ngIf.

Chỉ thị ng-click trong AngularJS là gì?

“chỉ thị ng-click” Trong AngularJS, `<click>` áp dụng hành vi tùy chỉnh khi một phần tử HTML được nhấp chuột. Nó thường được sử dụng trên các nút, vì đó là nơi phổ biến nhất để gắn phản hồi nhấp chuột, và nó cũng được sử dụng để hiển thị cảnh báo khi nhấp chuột.

Cú pháp ng-click trong AngularJS

<element
 ng-click="expression">
</element>

Ví dụ về ng-click trong AngularJS

Trong ví dụ ng-click này, một biến đếm sẽ tăng lên mỗi khi người dùng nhấp vào một nút.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body ng-app="">

<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 Global Event</h1>

<button ng-click="count = count + 1" ng-init="count=0">
    Increment
</button>

<div>The Current Count is {{count}}</div>

</body>
</html>

Code Giải thích:

Chỉ thị ng-init thiết lập biến cục bộ. count để 0.
Chỉ thị ng-click trên nút tăng dần count Tăng 1 đơn vị mỗi lần nhấp chuột.
Phép nội suy {{count}} Hiển thị giá trị hiện tại cho người dùng.

Đầu ra:

Nút "Tăng" được hiển thị và giá trị ban đầu là 0. Nhấp vào nút này sẽ tăng giá trị lên, như hình bên dưới cho thấy.

Chỉ thị ng-show trong AngularJS là gì?

chỉ thị ng-show Hiển thị hoặc ẩn một mục nhất định HTML Phần tử được tạo dựa trên biểu thức được cung cấp cho thuộc tính ng-show. Về mặt nội bộ, phần tử được hiển thị hoặc ẩn bằng cách xóa hoặc thêm biểu thức đó. .ng-hide Lớp CSS, một lớp được định nghĩa trước để thiết lập display đến none.

Cú pháp ng-show trong AngularJS

<element
 ng-show="expression">
</element>

Ví dụ về ng-show trong AngularJS

Ví dụ này sử dụng ng-show để hiển thị một phần tử bị ẩn.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Show Angular" ng-click="ShowHide()"/>

    <br><br><div ng-show="IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp', []);

    app.controller('DemoController', function($scope) {
        $scope.IsVisible = false;

        $scope.ShowHide = function() {
            $scope.IsVisible = true;
        };
    });
</script>

</body>
</html>

Code Giải thích:

Chỉ thị ng-click trên nút tham chiếu đến một ShowHide hàm được định nghĩa trong bộ điều khiển DemoController.
Thuộc tính `ng-show` được gắn vào thẻ `div` chứa văn bản "Angular". Đây là phần tử có khả năng hiển thị được kiểm soát.
Trong bộ điều khiển, IsVisible Biến thành viên được đặt trên đối tượng phạm vi và được khởi tạo bằng false, do đó div sẽ bị ẩn khi trang tải lần đầu. Với ng-show, giá trị của đúng hiển thị phần tử và sai che giấu nó.
ShowHide tập hợp chức năng IsVisible Đặt thành true để div hiển thị.

Đầu ra:

Thẻ div chứa văn bản ban đầu không hiển thị, bởi vì IsVisible Bắt đầu với giá trị false. Nhấp chuột Hiển thị Angular Đặt giá trị thành true và văn bản sẽ hiển thị.

Chỉ thị ng-hide trong AngularJS là gì?

chỉ thị ng-ẩn Ẩn một phần tử khi biểu thức của nó được đánh giá là TRUE, và hiển thị phần tử khi biểu thức là FALSE — hoàn toàn ngược lại với ng-show. Về mặt nội bộ, nó sử dụng cùng một cơ chế. .ng-hide Lớp CSS.

Cú pháp của ng-hide trong AngularJS

<element
 ng-hide="expression">
</element>

Ví dụ về ng-hide trong AngularJS

Ví dụ này phản ánh ví dụ ng-show để hai chỉ thị có thể được so sánh trực tiếp.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<h1>Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Hide Angular" ng-click="ShowHide()"/>

    <br><br><div ng-hide="IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp', []);

    app.controller('DemoController', function($scope) {
        $scope.IsVisible = false;

        $scope.ShowHide = function() {
            $scope.IsVisible = true;
        };
    });
</script>

</body>
</html>

Code Giải thích:

Chỉ thị ng-click trên nút tham chiếu đến ShowHide chức năng trong DemoController.
ng-ẩn Thuộc tính này được gắn vào thẻ div chứa văn bản Angular.
IsVisible được khởi tạo thành falseVì đây là ng-hide chứ không phải ng-show, nên giá trị false có nghĩa là div đó bị ẩn đi. có thể nhìn thấy khi trang web tải lần đầu.
ShowHide tập hợp chức năng IsVisible thành true, điều này sẽ ẩn div đi.

Đầu ra:

Thẻ div được hiển thị ban đầu vì giá trị false được truyền cho ng-hide. Nhấp chuột Ẩn Angular Điều đó đúng và từ ngữ biến mất.

ng-show vs ng-hide vs ng-if: Sự khác biệt chính

Ba chỉ thị kiểm soát việc người dùng có nhìn thấy một phần tử hay không, và việc lựa chọn giữa chúng ảnh hưởng đến cả hành vi và hiệu suất hiển thị. Hai chỉ thị đầu tiên chỉ bật/tắt một lớp CSS, do đó phần tử luôn hiện diện trên trang; chỉ thị thứ ba thêm và xóa chính phần tử đó.

Yếu tố	ng-show	ng-ẩn	ng-if
Phần tử hiển thị khi	Lời nói đó đúng sự thật	Biểu thức này sai	Lời nói đó đúng sự thật
Phần tử trong DOM	Luôn luôn	Luôn luôn	Chỉ khi nào đúng
phương pháp được sử dụng	Toggllớp es .ng-hide	Toggllớp es .ng-hide	Tạo và hủy phần tử
Phạm vi trẻ em	Chia sẻ phạm vi cha	Chia sẻ phạm vi cha	Tạo một phạm vi con mới
Những kẻ theo dõi khi ẩn nấp	Vẫn còn hoạt động	Vẫn còn hoạt động	Đã loại bỏ
Tốt nhất cho	Thường xuyên bật/tắt nội dung ánh sáng	Điều kiện đảo ngược	Nội dung nặng nề hiếm khi được hiển thị

Hãy sử dụng ng-show hoặc ng-hide khi một phần tử thường xuyên thay đổi trạng thái, vì phần tử đó không bao giờ được xây dựng lại và việc thay đổi trạng thái chỉ tốn một thay đổi về lớp. Sử dụng ng-if cho các phần tốn nhiều tài nguyên nhưng hiếm khi được hiển thị, vì việc xóa phần tử cũng xóa các trình theo dõi của nó và giảm chi phí xử lý trong mỗi chu kỳ.

Chỉ thị của Trình xử lý sự kiện AngularJS

Bạn có thể thêm trình lắng nghe sự kiện AngularJS vào các phần tử HTML bằng cách sử dụng một hoặc nhiều phương pháp sau: chỉ thị:

ng-blur
ng-thay đổi
ng-click
ng-sao chép
ng-cut
ng-dblclick
ng-tập trung
ng-keydown
ng-nhấn phím
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-dán
ng-gửi

Mỗi chỉ thị chấp nhận một biểu thức, và sự kiện trình duyệt thô có sẵn bên trong nó dưới dạng $event khi trình xử lý cần các chi tiết như phím đã nhấn hoặc tọa độ nhấp chuột.

Câu Hỏi Thường Gặp

Vượt qua khu vực đã đặt trước. $event biến đổi, như trong ng-click="handle($event)"Sau đó, bộ điều khiển nhận được sự kiện gốc và có thể đọc mục tiêu, tọa độ hoặc gọi preventDefault.

ng-repeat tạo một phạm vi con cho mỗi mục, vì vậy việc gán một giá trị nguyên thủy bên trong trình xử lý chỉ cập nhật phạm vi con đó. Hãy ghi vào thuộc tính của đối tượng trên phạm vi cha, hoặc sử dụng $parentĐể sự thay đổi được thể hiện rõ ràng ra bên ngoài.

Từng phần. AI công cụ chuyển đổi ng-click thành (click) và ng-show tới *ngIf Đáng tin cậy, nhưng logic phụ thuộc vào phạm vi và liên kết hai chiều cần được xem xét thủ công, vì phạm vi trong AngularJS không có tương đương trực tiếp trong Angular.

Các trợ lý AI nhanh chóng phát hiện ra các nguyên nhân thường gặp: thiếu ng-app, tên bộ điều khiển không khớp với đăng ký mô-đun hoặc lỗi chính tả trong thuộc tính chỉ thị. Giải pháp được đề xuất vẫn cần được kiểm tra trên trình duyệt.

Không. AngularJS chỉ cung cấp ng-show, ng-hide và ng-if. Không có chỉ thị ng-visible, và việc tham chiếu đến nó cũng không có tác dụng vì AngularJS bỏ qua các thuộc tính không được nhận dạng.

Chỉ thị ng-click, ng-show & ng-hide của AngularJS

Sự kiện AngularJS

Chỉ thị ng-click trong AngularJS là gì?

Cú pháp ng-click trong AngularJS

Ví dụ về ng-click trong AngularJS

Chỉ thị ng-show trong AngularJS là gì?

Cú pháp ng-show trong AngularJS

Ví dụ về ng-show trong AngularJS

Chỉ thị ng-hide trong AngularJS là gì?

Cú pháp của ng-hide trong AngularJS

Ví dụ về ng-hide trong AngularJS

ng-show vs ng-hide vs ng-if: Sự khác biệt chính

Chỉ thị của Trình xử lý sự kiện AngularJS

Câu Hỏi Thường Gặp

Tóm tắt bài viết này với:

Đăng kí để nhận thư mới

Sự kiện AngularJS

Chỉ thị ng-click trong AngularJS là gì?

Cú pháp ng-click trong AngularJS

Ví dụ về ng-click trong AngularJS

Chỉ thị ng-show trong AngularJS là gì?

Cú pháp ng-show trong AngularJS

Ví dụ về ng-show trong AngularJS

NHỮNG BÀI VIẾT LIÊN QUAN

Chỉ thị ng-hide trong AngularJS là gì?

Cú pháp của ng-hide trong AngularJS

Ví dụ về ng-hide trong AngularJS

ng-show vs ng-hide vs ng-if: Sự khác biệt chính

Chỉ thị của Trình xử lý sự kiện AngularJS

Câu Hỏi Thường Gặp

Tóm tắt bài viết này với:

Đăng kí để nhận thư mới