AngularJS Eventi

❮ Precedente Prossimo ❯

AngularJS ha le proprie direttive di eventi HTML.

AngularJS Eventi

Puoi aggiungere listener di eventi AngularJS ai tuoi 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 dell'evento ci consentono di eseguire funzioni AngularJS in determinati eventi utente.

Un evento AngularJS non sovrascriverà un evento HTML, verranno eseguiti entrambi gli eventi.

Eventi del mouse

Gli eventi del mouse si verificano quando il cursore si sposta su un elemento, in questo ordine:

di passaggio del mouse
di-mouseenter
ng-mousemov
ng-mouseleave

Oppure quando un pulsante del mouse viene cliccato su un elemento, in questo ordine:

di-mousedown
di mouseup
di clic

Puoi aggiungere eventi del mouse su qualsiasi elemento HTML.

Esempio

Aumenta la variabile di conteggio quando il mouse si sposta sull'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>

La direttiva sui clic

La ng-click direttiva definisce il codice AngularJS che verrà eseguito quando si fa clic sull'elemento.

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>

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

Alterna, Vero/Falso

Se vuoi mostrare una sezione di codice HTML quando si fa clic su un pulsante e nasconderla quando si fa nuovamente clic sul pulsante, come un menu a discesa, fare in modo che il pulsante si comporti come un interruttore a levetta:

<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 showMevariabile inizia come valore booleano false.

La myFuncfunzione imposta la showMevariabile sull'opposto di ciò che è, utilizzando l' !operatore (non).

$ oggetto evento

È possibile passare l' $eventoggetto come argomento quando si chiama la funzione.

L' $eventoggetto contiene l'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>

❮ Precedente Prossimo ❯

Esercitazione

Esempi

Riferimento

AngularJS Eventi