Sự kiện AngularJS

❮ Trước Kế tiếp ❯

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-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 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 đè 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:

di chuột qua
of-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:

of-mousedown
of-mouseup
nhấp chuột

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>

Chỉ thị nhấp chuột

Chỉ ng-click thị xác định mã AngularJS sẽ được thực thi khi phần tử đang được nhấp.

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:

<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>

Biến showMebắt đầu là giá trị Boolean false.

Hàm myFuncđặt showMebiến ngược lại với biến bằng cách sử dụng !toán tử (not).

Đố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>

❮ Trước Kế tiếp ❯

Hướng dẫn

Các ví dụ

Tài liệu tham khảo

Sự kiện AngularJS