Sự kiện AngularJS

AngularJS có các chỉ thị sự kiện HTML riêng của mình.

Sự kiện AngularJS

Bạn có thể thêm bộ lắng nghe sự kiện AngularJS vào các phần tử HTML của bạn bằng cách sử dụng một hoặc nhiều chỉ thị 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

Chỉ thị sự kiện cho phép chúng ta chạy các hàm AngularJS trên một số sự kiện người dùng.

Các sự kiện sự kiện AngularJS sẽ không che盖 HTML sự kiện, cả hai sự kiện sẽ được thực thi.

Sự kiện chuột

Khi con trỏ di chuyển lên phần tử, các sự kiện chuột sẽ xảy ra theo thứ tự sau:

  • ng-mouseover
  • ng-mouseenter
  • ng-mousemove
  • ng-mouseleave

hoặc, khi nhấn vào phần tử, các sự kiện chuột sẽ được kích hoạ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.

Mô hình

Khi di chuột lên phần tử H1, tăng biến count:

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">Di chuột lên trên tôi!</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

Thử trực tiếp

Hướng dẫn ng-click

ng-click Hướng dẫn định nghĩa mã AngularJS sẽ được thực thi khi phần tử được nhấn.

Mô hình

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Nhấn tôi!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

Thử trực tiếp

Bạn cũng có thể gọi một hàm:

Mô hình

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunction()">Nhấn tôi!</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>

Thử trực tiếp

Chuyển đổi, có/không

Nếu bạn muốn hiển thị một phần mã HTML khi nhấn nút và ẩn đi khi nhấn nút lần nữa, giống như menu cuộn, hãy để nút hoạt động như một công tắc chuyển đổi:

Nhấn tôi

Mô hình

<div ng-app="myApp" ng-controller="myCtrl">  
<button ng-click="myFunc()">Nhấn tôi!</button>  
<div ng-show="showMe">  
  <h1>Menu:</h1>  
  <div>Pizza</div>  
  <div>Bánh mì Ý</div>  
  <div>Thực phẩm hải sản</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>

Thử trực tiếp

showMe biến bắt đầu là giá trị布尔. false.

myFunc hàm thông qua việc sử dụng !（phi）toán tử, sẽ showMe biến thành giá trị ngược lại với giá trị hiện tại của nó.

$event đối tượng

Khi gọi hàm có thể đặt $event Đối tượng được truyền làm tham số.

$event Đối tượng chứa đối tượng sự kiện trình duyệt:

Mô hình

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">Dời con trỏ lên trên tôi!</h1>
<p>Tọa độ: {{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>

Thử trực tiếp