手册
目录
你可以通过使用以下一个或多个指令，将 AngularJS 事件监听器添加到你的 HTML 元素中：
ng-blurng-changeng-clickng-copyng-cutng-dblclickng-focusng-keydownng-keypressng-keyupng-mousedownng-mouseenterng-mouseleaveng-mousemoveng-mouseoverng-mouseupng-paste事件指令允许我们在某些用户事件上运行 AngularJS 函数。
AngularJS 事件不会覆盖 HTML 事件，两个事件都会被执行。
当光标移动到元素上时，将按照以下顺序发生鼠标事件：
或者，当鼠标点击元素时，将按照以下顺序触发：
您可以在任何 HTML 元素上添加鼠标事件。
当鼠标移动到 H1 元素上时，增加 count 变量：
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="count = count + 1">鼠标移到我上方！</h1>
<h2>{{ count }}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
运行实例 »点击 "运行实例" 按钮查看在线实例
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()">点击我！</button>
<div ng-show="showMe">
<h1>菜单：</h1>
<div>披萨</div>
<div>意大利面</div>
<div>海鲜</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)">鼠标移到我上方！</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>
运行实例 »点击 "运行实例" 按钮查看在线实例
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.4万人学习
共29课时
62万人学习
共25课时
39.5万人学习
共43课时
71.3万人学习
共25课时
61.9万人学习
共22课时
23.1万人学习
共28课时
34.1万人学习
共89课时
125.8万人学习
