AngularJS 事件
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 元素上时增加 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 指令
the ng-click 指令定义了在点击元素时将执行的 AngularJS 代码。
示例
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">点击我！</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()">点击我！</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>
自己尝试一下 »
the showMe 变量最初是布尔值 false。
the myFunc 函数使用 !（非）运算符将 showMe 变量设置为与当前值相反。
$event 对象
您可以将 $event 对象作为参数传递给调用函数时。
the $event 对象包含浏览器的事件对象
示例
<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">鼠标移到我上面！</h1>
<p>坐标：{{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>
自己尝试一下 »
