Eventi AngularJS

AngularJS ha le proprie istruzioni di evento HTML.

Eventi AngularJS

Puoi aggiungere un'istanza di listener di eventi AngularJS al tuo elemento HTML utilizzando una o più delle seguenti istruzioni:

  • 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'istruzione di evento consente di eseguire funzioni AngularJS su determinati eventi utente.

Gli eventi AngularJS non sovrascrivono gli eventi HTML, entrambi vengono eseguiti.

Eventi del mouse

Quando il cursore si muove sopra l'elemento, avvengono gli eventi del mouse in questo ordine:

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

O, quando si clicca sull'elemento, viene attivato in questo ordine:

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

Puoi aggiungere eventi del mouse a qualsiasi elemento HTML.

Esempio

Aumenta la variabile count quando il mouse si muove sopra l'elemento H1:

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">Muovi il mouse sopra di me!</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

Prova tu stesso!

direttiva ng-click

ng-click Le direttive definiscono il codice AngularJS che viene eseguito quando un 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!

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

Commutazione, vero/falso

Se desideri visualizzare una parte di codice HTML quando si clicca sul pulsante e nasconderla di nuovo quando si clicca di nuovo, come un menu a discesa, fai apparire il pulsante come un interruttore di commutazione:

Clicca su di me

Esempio

<div ng-app="myApp" ng-controller="myCtrl">  
<button ng-click="myFunc()">Clicca su di me!</button>  
<div ng-show="showMe">  
  <h1>Menu:</h1>  
  <div>Pizza</div>  
  <div>Pasta</div>  
  <div>Frutti di mare</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!

showMe La variabile inizia come valore booleano false.

myFunc la funzione utilizzando !l'operatore (non) logico, che converte showMe impostare la variabile con il valore opposto del suo valore corrente.

$event oggetto

Si può chiamare la funzione utilizzando $event L'oggetto viene passato come parametro.

$event L'oggetto contiene l'oggetto evento del browser:

Esempio

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">Muovi il mouse sopra di me!</h1>
<p>Coordinate: {{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!