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-的mouseenter
- NG-鼠标悬停
- NG-鼠标移动
- NG-鼠标离开
或当鼠标按钮被点击的元素上，顺序如下：
- NG-鼠标按下
- NG-鼠标松开
- 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-点击指令
在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>
试一试»