AngularJS 事件

AngularJS 有自己的 HTML 事件指令。

AngularJS 事件

您可以使用以下一个或多个指令将 AngularJS 事件侦听器添加到 HTML 元素：

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

事件指令允许我们在某些用户事件上运行 AngularJS 函数。

AngularJS 事件不会覆盖 HTML 事件，两个事件都会被执行。

鼠标事件

当光标移动到元素上时，会发生鼠标事件，顺序如下：

ng-鼠标悬停
ng-mouseenter
ng-mousemove
ng-mouseleave

或者当在元素上单击鼠标按钮时，按以下顺序：

ng-mousedown
ng-mouseup
NG-点击

您可以在任何 HTML 元素上添加鼠标事件。

示例

当鼠标移到 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>

亲自试一试 »

ng-click 指令

这个ng-click指令定义了单击元素时将执行的 AngularJS 代码。

示例

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

亲自试一试 »

还可以参考一个函数：

示例

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

亲自试一试 »

切换，真/假

如果您想在单击按钮时显示一段 HTML 代码，并在再次单击按钮时隐藏，就像下拉菜单一样，请使按钮的行为类似于切换开关：

菜单：

比萨

意大利面

佩什

示例

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

亲自试一试 »

这个showMe变量以布尔值开始false。

这个myFunc函数设置showMe变量与它的实际情况相反，通过使用!（非）运算符。

$事件对象

您可以通过$event调用函数时将对象作为参数。

这个$event对象包含浏览器的事件对象：

示例

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

亲自试一试 »