AngularJS HTML 事件
AngularJS 有自己的 HTML 事件指令。
AngularJS 事件
您可以使用以下一个或多个指令将 AngularJS 事件侦听器添加到 HTML 元素:
ng-blurng-changeng-clickng-copyng-cutng-dblclickng-focusng-keydownng-keypressng-keyupng-mousedownng-mouseenterng-mouseleaveng-mousemoveng-mouseoverng-mouseupng-paste
事件指令允许我们在某些用户事件中运行 AngularJS 函数。
AngularJS 事件不会覆盖 HTML 事件，两个事件都将执行。
鼠标事件
鼠标事件在光标移动到元素上时发生，顺序如下:
- ng-mouseover
- ng-mouseenter
- ng-mousemove
- ng-mouseleave
或者在元素上单击鼠标按钮时，按以下顺序:
- ng-mousedown
- ng-mouseup
- ng-click
您可以在任何 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>
亲自试一试 »
切换, True/False
如果要在单击按钮时显示一段 HTML 代码，并在再次单击按钮时隐藏，如下拉菜单，请使按钮的行为类似于切换开关:
Menu:
Pizza
Pasta
Pesce
实例
<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 函数通过使用 !（非）运算符。
$event 对象
调用函数时，可以将 $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>
亲自试一试 »
