Sự kiện AngularJS
AngularJS có các chỉ thị sự kiện HTML riêng.
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-blur
-
ng-change
-
ng-click
-
ng-copy
-
ng-cut
-
ng-dblclick
-
ng-focus
-
ng-keydown
-
ng-keypress
-
ng-keyup
-
ng-mousedown
-
ng-mouseenter
-
ng-mouseleave
-
ng-mousemove
-
ng-mouseover
-
ng-mouseup
-
ng-paste
Các chỉ thị sự kiện cho phép chúng ta chạy các hàm AngularJS tại một số sự kiện nhất định của người dùng.
Sự kiện AngularJS sẽ không ghi đè lên 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 nhấn nút chuột vào một phần tử, theo thứ tự sau:
- ng-mousedown
- ng-mouseup
- ng-click
Bạn có thể thêm sự kiện chuột vào bất kỳ phần tử HTML nào.
Ví dụ
Tăng biến count 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ãy tự mình thử » Chỉ thị ng-click
Lệnh ng-click
xác định mã AngularJS sẽ được thực thi khi phần tử được nhấp vào.
Ví 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>
Hãy tự mình thử »Bạn cũng có thể tham khảo một chức năng:
Ví 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>
Hãy tự mình thử »Chuyển đổi, Đúng/Sai
Nếu bạn muốn hiển thị một phần mã HTML khi một nút được nhấp vào và ẩn khi nút được nhấp lại, chẳng hạn 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:
Thực đơn:
Ví 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>
Hãy tự mình thử » Biến showMe
bắt đầu bằng giá trị Boolean false
.
Hàm myFunc
đặt biến showMe
ngược lại với giá trị của nó, bằng cách sử dụng !
(không) toán tử.
Đối tượng sự kiện $
Bạn có thể truyền đối tượng $event
làm đối số khi gọi hàm.
Đối tượng $event
chứa đối tượng sự kiện của trình duyệt:
Ví 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>
Hãy tự mình thử »