Events

AngularJS have its own event directive to handle DOM events like mouse clicks, moves, keyboard presses, change events etc. Following are the event directive of AngularJS;
  • ng-click
  • ng-dbl-click
  • ng-mousedown
  • ng-mouseup
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-keydown
  • ng-keyup
  • ng-keypress
  • ng-change

ng-click Directive

ng-click directive are use for perform an AngularJS click event.

Example

<div ng-app="" ng-controller="clickController">

<button ng-click="count = count + 1">Increment!</button>

<p>{{ count }}</p>

</div>
<script>
function clickController($scope) {
    $scope.count = 0;
}
</script>

Output

0

ng-mouseenter Directive

ng-mouseenter directive are use for perform an AngularJS event when mouse hover on any Html elements.

Example

<div ng-app="" ng-controller="clickController">

<button ng-mouseenter="count = count + 1">Touch Me!</button>

<p>{{ count }}</p>

</div>
<script>
function clickController($scope) {
    $scope.count = 0;
}
</script>