W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

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事件,这两个事件都将被执行。


鼠标事件

当光标在元素上移动时,会按照以下顺序发生鼠标事件:

  1. ng-mouseenter
  2. ng-mouseover
  3. ng-mousemove
  4. ng-mouseleave

或者当单击一个鼠标按钮时,按以下顺序:

  1. ng-mousedown
  2. ng-mouseup
  3. ng-click

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

Example

当鼠标移动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 点击事件。

Example

<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>
尝试一下 »

你也可以参考一个函数:

Example

<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

Example

<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 变量以 Boolean 值为 false 开头。

myFunc 函数将 showMe 变量设置为与之相反,通过使用 ! (not) 操作符。


$event 对象

调用函数时可以将 $event 对象作为参数传递。

$event 对象包含浏览器的事件对象:

Example

<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>
尝试一下 »