Événements AngularJS

AngularJS possède ses propres instructions d'événements HTML.

Événements AngularJS

Vous pouvez ajouter des gestionnaires d'événements AngularJS à vos éléments HTML en utilisant l'une ou plusieurs des instructions suivantes :

• 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

L'instruction d'événement permet d'exécuter des fonctions AngularJS sur certains événements d'utilisateurs.

Les événements AngularJS ne remplacent pas les événements HTML, les deux événements sont exécutés.

Événements souris

Lorsque le curseur se déplace sur l'élément, les événements souris se produisent dans l'ordre suivant :

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

Ou, lorsque l'élément est cliqué par la souris, les événements sont déclenchés dans l'ordre suivant :

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

Vous pouvez ajouter des événements souris à n'importe quel élément HTML.

Exemple

Augmentez la variable count lorsque le curseur est déplacé sur l'élément H1 :

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">Déplacez le curseur au-dessus de moi !</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

Essayer vous-même

Directive ng-click

ng-click Les directives définissent le code AngularJS à exécuter lorsque l'élément est cliqué.

Exemple

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Cliquez-moi !</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

Essayer vous-même

Vous pouvez également appeler une fonction :

Exemple

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunction()">Cliquez-moi !</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>

Essayer vous-même

Bascule, vrai/faux

Si vous souhaitez afficher une partie de code HTML lors du clic sur le bouton et le cacher à nouveau lors d'un autre clic, comme un menu déroulant, faites que le bouton se comporte comme un interrupteur à bascule :

Exemple

<div ng-app="myApp" ng-controller="myCtrl">  
<button ng-click="myFunc()">Cliquez-moi !</button>  
<div ng-show="showMe">  
  <h1>Menu :</h1>  
  <div>Pizza</div>  
  <div>Pâtes</div>  
  <div>Produits de la mer</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>

Essayer vous-même

showMe La variable commence par une valeur booléenne false.

myFunc La fonction est appelée en utilisant !L'opérateur (non) logique, qui showMe La variable est définie avec la valeur opposée de sa valeur actuelle.

l'objet $event

Lors de l'appel de la fonction, on peut $event L'objet est transmis en tant que paramètre.

$event L'objet contient l'objet d'événement du navigateur :

Exemple

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">Déplacez le curseur au-dessus de moi !</h1>
<p>Coordonnées: {{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>

Essayer vous-même