AngularJS ha le proprie direttive eventi HTML.
Eventi AngularJS
È possibile aggiungere AngularJS listener di eventi per gli elementi HTML utilizzando una o più di queste direttive:
-
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
Le direttive evento ci permette di eseguire AngularJS funzioni a certi eventi utente.
Un evento AngularJS non sovrascrivere un evento HTML, verrà eseguito entrambi gli eventi.
eventi mouse
Gli eventi del mouse si verificano quando il cursore si sposta su un elemento, in questo ordine:
- ng-MouseEnter
- ng-mouseover
- ng-MouseMove
- ng-mouseLeave
O quando un pulsante del mouse si fa clic su un elemento, in questo ordine:
- ng-mousedown
- ng-MouseUp
- ng-click
È possibile aggiungere gli eventi del mouse su qualsiasi elemento HTML.
Esempio
Aumentare la variabile conteggio quando il mouse passa sopra l'elemento 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> Prova tu stesso " La direttiva ng-click
Il ng-click direttiva definisce il codice AngularJS che sarà eseguito quando l'elemento viene cliccato.
Esempio
<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> Prova tu stesso " È inoltre possibile fare riferimento a una funzione:
Esempio
<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> Prova tu stesso " Toggle, Vero / Falso
Se si desidera visualizzare una sezione di codice HTML quando un pulsante viene premuto, e nascondere quando il pulsante viene premuto di nuovo, come un menu a discesa, fare il pulsante si comporta come un interruttore:
Menu:
Esempio
<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> Prova tu stesso " Il showMe variabile inizia come il valore booleano false .
La myFunc funzione imposta il showMe variabile al contrario di quello che è, utilizzando l' ! Operatore di (non).
$ Oggetto evento
È possibile passare il $event oggetto come argomento quando si chiama la funzione.
L' $event oggetto contiene oggetto evento del browser:
Esempio
<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>
Prova tu stesso "