这一篇博客为大家介绍一下AngularJS为我们提供的事件指令。
ngBlur
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript"> angular.module("MyApp",[]).controller("MyCtrl",function($scope) { $scope.blur=function(msg){ alert(msg); }; }); </script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<input ng-blur="blur('button1 blur')" type="button" value="button1" />
</body>
</html>
ngChange
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript"> angular.module("MyApp",function($scope) { $scope.counter = 0; $scope.change = function() { $scope.counter++; }; }); </script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<input type="checkBox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" />
<label for="ng-change-example1">Confirmed</label><br />
<tt>counter = {{counter}}</tt><br/>
</body>
</html>
ngClick
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript"> angular.module("MyApp",function($scope) { $scope.count = 0; }); </script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<button ng-click="count = count + 1">Increment</button>
<span>count: {{count}}</span>
</body>
</html>
ngCopy
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript"> angular.module("MyApp",function($scope) { $scope.copied = false; $scope.value = 'copy me'; }); </script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<input ng-copy="copied=true" ng-model="value"> copied: {{copied}}
</body>
</html>
ngCut
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript"> angular.module("MyApp",function($scope) { $scope.cut = false; $scope.value = 'cut me'; }); </script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<input ng-cut="cut=true" ng-model="value"> cut: {{cut}}
</body>
</html>
ngDblclick
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript"> angular.module("MyApp",function($scope) { $scope.count = 0; }); </script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<button ng-dblclick="count = count + 1">
Increment (on double click)
</button> count: {{count}}
</body>
</html>
ngKeydown
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript"> angular.module("MyApp",function($scope) { $scope.count = 0; }); </script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<input ng-keydown="count = count + 1">
key down count: {{count}}
</body>
</html>
ngKeypress
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript"> angular.module("MyApp",function($scope) { $scope.count = 0; }); </script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<input ng-keypress="count = count + 1">
key press count: {{count}}
</body>
</html>
ngKeyup
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript"> angular.module("MyApp",function($scope) { $scope.count = 0; }); </script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<p>Typing in the input Box below updates the key count</p>
<input ng-keyup="count = count + 1"> key up count: {{count}}
<p>Typing in the input Box below updates the keycode</p>
<input ng-keyup="event=$event">
<p>event keyCode: {{ event.keyCode }}</p>
<p>event altKey: {{ event.altKey }}</p>
</body>
</html>
ngMousedown
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript"> angular.module("MyApp",function($scope) { $scope.count = 0; }); </script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<button ng-mousedown="count = count + 1">
Increment (on mouse down)
</button>
count: {{count}}
</body>
</html>
ngMouseenter
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript"> angular.module("MyApp",function($scope) { $scope.count = 0; }); </script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<button ng-mouseenter="count = count + 1">
Increment (when mouse enters)
</button>
count: {{count}}
</body>
</html>
ngMouseleave
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript"> angular.module("MyApp",function($scope) { $scope.count = 0; }); </script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<button ng-mouseleave="count = count + 1">
Increment (when mouse leaves)
</button>
count: {{count}}
</body>
</html>
ngMousemove
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript"> angular.module("MyApp",function($scope) { $scope.count = 0; }); </script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<button ng-mousemove="count = count + 1">
Increment (when mouse moves)
</button>
count: {{count}}
</body>
</html>
ngMouSEOver
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript"> angular.module("MyApp",function($scope) { $scope.count = 0; }); </script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<button ng-mouSEOver="count = count + 1">
Increment (when mouse is over)
</button>
count: {{count}}
</body>
</html>
ngMouseup
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript"> angular.module("MyApp",function($scope) { $scope.count = 0; }); </script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<button ng-mouseup="count = count + 1">
Increment (on mouse up)
</button>
count: {{count}}
</body>
</html>
ngPaste
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title></title>
<script src="angular.min.js" type="text/javascript"></script>
<script type="text/javascript"> angular.module("MyApp",function($scope) { $scope.paste = false; }); </script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<input ng-paste="paste=true" placeholder='paste here'>
pasted: {{paste}}
</body>
</html>
