AngularJS a ses propres HTML événements directives.
Evénements AngularJS
Vous pouvez ajouter AngularJS événement auditeurs à vos éléments HTML en utilisant l'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 de l'événement nous permet d'exécuter AngularJS fonctions à certains événements utilisateur.
Un événement AngularJS ne remplacera pas un événement HTML, les deux événements sera exécuté.
Événements de la souris
Les événements de souris se produisent lorsque le curseur se déplace sur un élément, dans cet ordre:
- ng-mouseenter
- ng-mouseover
- ng-mousemove
- ng-mouseleave
Ou quand un bouton de la souris est cliqué sur un élément, dans cet ordre:
- ng-mousedown
- ng-mouseup
- ng-clic
Vous pouvez ajouter des événements de la souris sur un élément HTML.
Exemple
Augmenter la variable de comptage lorsque les mouvements de la souris 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> Essayez - le vous - même » Le ng-clic directive
Le ng-click directive définit le code qui sera exécuté lorsque l'élément est cliqué de AngularJS.
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> Essayez - le vous - même » 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> Essayez - le vous - même » Basculer, Vrai / Faux
Si vous voulez montrer une section de code HTML quand un bouton est cliqué, et se cacher lorsque le bouton est cliqué à nouveau, comme un menu déroulant, faire le bouton se comporte comme un interrupteur à bascule:
-
Le menu:
Exemple
<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> Essayez - le vous - même » La showMe variables commence comme la valeur booléenne false .
La myFunc fonction définit le showMe variable à l'opposé de ce qu'elle est, en utilisant le ! Opérateur (non).
$ Event Object
Vous pouvez passer le $event objet comme argument lors de l' appel de la fonction.
Le $event objet contient l'objet de l' é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>
Essayez - le vous - même »