AngularJS Events

 AngularJS Events

AngularJS has its own HTML events directives.

* AngularJS Events

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

The event directives allow us to run AngularJS functions at certain user events.

An AngularJS event will not overwrite an HTML event, both events will be executed.

* Mouse Events

Mouse events occur when the cursor moves over an element, in this order:

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

Or when a mouse button is clicked on an element, in this order:

• ng-mousedown
• ng-mouseup
• ng-click

You can add mouse events on any HTML element.

Example:
Increase the count variable when the mouse moves over the H1 element:

<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>

* The ng-click Directive

The ng-click directive defines the AngularJS code that will be executed when the element is being clicked.

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>

You can also refer to a function:

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>

* Toggle, True/False

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>


The showMe variable starts out as the Boolean value false.

The myFunc function sets the showMe variable to the opposite of what it is, by using the! (not) operator.

* $event Object

You can pass the $event object as an argument when calling the function.

The $event object contains the browser's event object:

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>