事件指令

AngularJS 有其自己的HTML事件指令。

您可以使用以下一个或多个指令将 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事件，两个事件都将被执行。

Mouse 事件

当光标按以下顺序移动到元素上时，发生鼠标事件：

ng-mouseover
ng-mouseenter
ng-mousemove
ng-mouseleave

或在元素上单击鼠标按钮时，按此顺序：

ng-mousedown
ng-mouseup
ng-click

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

下面示例演示了当鼠标移到H1元素上时，增加count变量：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <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>
</body>
</html>

尝试一下

ng-click 指令

ng-click 指令定义了单击元素时将执行的AngularJS代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
       <button ng-click="count = count + 1">点击我+1</button>
       <p>{{ count }}</p>
    </div> 
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.count = 0;
        });
    </script>
</body>
</html>

尝试一下

您还可以引用一个函数：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <button ng-click="myFunction()">点击我+1</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>
</body>
</html>

尝试一下

Toggle, True/False

如果要在单击按钮时显示一部分HTML代码，并在再次单击按钮时隐藏（如下拉菜单），则使按钮的行为类似于切换开关：

菜单导航:

Pizza

Pasta

Pesce

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
       <button ng-click="myFunc()">点击我切换显示/隐藏菜单</button>
        <div ng-show="showMe">
             <h1>菜单导航:</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>
</body>
</html>

尝试一下

showMe 变量以布尔值false开始。

myFunc 函数通过使用！将 showMe 变量设置为与它相反的值。!（不是）运算符。

$event 对象

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

下面示例演示了 $event 对象包含浏览器的事件对象：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蝴蝶教程(jc2182.com)</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
    <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>
</body>
</html>

尝试一下

AngularJS 事件

事件指令

Mouse 事件

ng-click 指令

Toggle, True/False

菜单导航:

$event 对象