AngularJS có các chỉ thị sự kiện HTML của riêng nó.
Sự kiện AngularJS
Bạn có thể thêm trình xử lý sự kiện AngularJS vào các phần tử HTML của mình bằng cách sử dụng một hoặc nhiều lệnh sau:
ng-blurng-changeng-clickng-copyng-cutng-dblclickng-focusng-keydownng-keypressng-keyupng-mousedownng-mouseenterng-mouseleaveng-mousemoveng-mouseoverng-mouseupng-paste
Các chỉ thị sự kiện cho phép chúng tôi chạy các chức năng AngularJS tại các sự kiện người dùng nhất định.
Một sự kiện AngularJS sẽ không ghi đè lên một sự kiện HTML, cả hai sự kiện sẽ được thực thi.
Sự kiện chuột
Sự kiện chuột xảy ra khi con trỏ di chuyển qua một phần tử, theo thứ tự sau:
- ng-mouseover
- ng-mouseenter
- ng-mousemove
- ng-mouseleave
Hoặc khi một nút chuột được nhấp vào một phần tử, theo thứ tự sau:
- ng-mousedown
- ng-mouseup
- ng-click
Bạn có thể thêm các sự kiện chuột trên bất kỳ phần tử HTML nào.
Thí dụ
Tăng biến đếm khi chuột di chuyển qua phần tử H1:
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="count = count + 1">Mouse over me!</h1>
<h2>{{ count }}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
Hướng dẫn ng-click
Các ng-click định nghĩa chỉ AngularJS mã mà sẽ được thực hiện khi các phần tử đang được nhấp vào.
Thí dụ
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
Bạn cũng có thể tham khảo một chức năng:
Thí dụ
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunction()">Click me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
$scope.myFunction = function() {
$scope.count++;
}
});
</script>
Chuyển đổi, Đúng / Sai
Nếu bạn muốn hiển thị một phần của mã HTML khi một nút được nhấp và ẩn khi nút được nhấp lại, giống như menu thả xuống, hãy làm cho nút hoạt động giống như một công tắc bật tắt:
Nhấp vào đây
Thí dụ
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunc()">Click Me!</button>
<div ng-show="showMe">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
<div>Pesce</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showMe = false;
$scope.myFunc = function() {
$scope.showMe = !$scope.showMe;
}
});
</script>
Các showMebiến bắt đầu ra như giá trị Boolean false.
Các myFuncchức năng thiết lập showMebiến trái ngược với những gì nó là, bằng công !(không) điều hành.
Đối tượng $ event
Bạn có thể truyền $eventđối tượng làm đối số khi gọi hàm.
Đối $eventtượng chứa đối tượng sự kiện của trình duyệt:
Thí dụ
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">Mouse Over Me!</h1>
<p>Coordinates: {{x + ', ' + y}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.myFunc = function(myE) {
$scope.x = myE.clientX;
$scope.y = myE.clientY;
}
});
</script>