You can add AngularJS event listeners to your HTML elements by using one or more of these directives:
- 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
Example
< !DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head><head> <title>Angular JS Controller</title> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> <body> <h2>AngularJS Demo Application</h2> <div ng-app="MyApp" ng-controller="MyController" ng-init="test()"> <h1 ng-mousemove="count = count + 1">Mouse over me!</h1> <h2>{{ count }}</h2> <h1 ng-mousemove="myFunc($event)">Mouse Over Me! with Event</h1> <p>Coordinates: {{x + ', ' + y}}</p> <button ng-click="clickCount = clickCount + 1">Click me!</button> <p>{{ clickCount }}</p> <button ng-click="toggleShow()">Click to Toggle Show</button> <p ng-show="show"> Toggle Me </p> </div> <script> var app = angular.module("MyApp", []); $scope.count = 0; $scope.clickCount = 0; $scope.myFunc = function($event) { $scope.x = event.clientX; $scope.y = event.clientY; } $scope.toggleShow = function(){ $scope.show = !$scope.show; } }); </script> </body></html> |