Événements AngularJS

AngularJS a ses propres directives d'événements HTML.

Événements AngularJS

Vous pouvez ajouter des écouteurs d'événement AngularJS à vos éléments HTML en utilisant une ou plusieurs de ces 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

Les directives d'événement nous permettent d'exécuter des fonctions AngularJS lors de certains événements utilisateur.

Un événement AngularJS n'écrasera pas un événement HTML, les deux événements seront exécutés.

Événements de souris

Les événements de souris se produisent lorsque le curseur se déplace sur un élément, dans cet ordre :

du passage de la souris
of-mouseenter
ng-mousemove
ng-mouseeleave

Ou lorsqu'un bouton de la souris est cliqué sur un élément, dans cet ordre :

of-mousedown
of-mouseup
de clic

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

Exemple

Augmentez la variable count lorsque la souris se déplace sur l'élément H1 :

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

La directive clic

La ng-click directive définit le code AngularJS qui sera exécuté lorsque l'élément sera cliqué.

Exemple

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

Vous pouvez également faire référence à une fonction :

Exemple

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

Basculer, Vrai/Faux

Si vous souhaitez afficher une section de code HTML lorsqu'un bouton est cliqué et la masquer lorsque vous cliquez à nouveau sur le bouton, comme un menu déroulant, faites en sorte que le bouton se comporte comme un interrupteur à bascule :

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

La showMevariable commence par la valeur booléenne false.

La myFuncfonction définit la showMevariable à l'opposé de ce qu'elle est, en utilisant l' !opérateur (non).

Objet $événement

Vous pouvez passer l' $eventobjet comme argument lors de l'appel de la fonction.

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

Exemple

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

❮ Précédent Suivant ❯

Didacticiel

Exemples

Référence

Événements AngularJS