Eventos AngularJS

O AngularJS possui suas próprias instruções de eventos HTML.

Eventos AngularJS

Você pode adicionar ouvintes de eventos AngularJS aos seus elementos HTML usando uma ou mais das seguintes instruções:

  • 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

A instrução de evento permite que executemos funções AngularJS em certos eventos de usuários.

Os eventos AngularJS não substituem os eventos HTML; ambos serão executados.

Eventos de mouse

Os eventos do mouse ocorrem na seguinte ordem quando o cursor se move sobre o elemento:

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

Ou, quando o elemento é clicado pelo mouse, os eventos serão acionados na seguinte ordem:

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

Você pode adicionar eventos de mouse a qualquer elemento HTML.

Exemplo

Aumenta a variável count quando o mouse se move sobre o elemento H1:

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">Clique em mim acima!</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

Experimente Você Mesmo

diretiva ng-click

ng-click A diretiva define o código AngularJS que será executado ao clicar no elemento.

Exemplo

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Clique em mim!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

Experimente Você Mesmo

Você também pode chamar uma função:

Exemplo

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunction()">Clique em mim!</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>

Experimente Você Mesmo

Alternar, verdadeiro/falso

Se você quiser exibir parte do código HTML ao clicar no botão e ocultá-lo novamente ao clicar no botão, como um menu suspenso, faça o botão parecer um interruptor de alternância:

Clique em mim

Exemplo

<div ng-app="myApp" ng-controller="myCtrl">  
<button ng-click="myFunc()">Clique em mim!</button>  
<div ng-show="showMe">  
  <h1>Menu:</h1>  
  <div>Pizza</div>  
  <div>Pasta</div>  
  <div>Marisco</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>

Experimente Você Mesmo

showMe a variável começa como um valor booleano false.

myFunc a função usando !operador (não) lógico, que inverte showMe definir a variável como o valor oposto do seu valor atual.

$event objeto

Ao chamar a função, você pode usar $event O objeto é passado como parâmetro.

$event O objeto contém o objeto de evento do navegador:

Exemplo

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">Move o Mouse Acima de Mim!</h1>
<p>Coordenadas: {{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>

Experimente Você Mesmo