Eventos AngularJS

❮ Anterior Próximo ❯

AngularJS tem suas próprias diretivas de eventos HTML.

Eventos AngularJS

Você pode adicionar ouvintes de eventos AngularJS aos seus elementos HTML usando uma ou mais destas diretivas:

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

As diretivas de evento nos permitem executar funções AngularJS em determinados eventos de usuário.

Um evento AngularJS não substituirá um evento HTML, ambos os eventos serão executados.

Eventos do mouse

Os eventos do mouse ocorrem quando o cursor se move sobre um elemento, nesta ordem:

de passar o mouse
de-mouseenter
ng-mousemove
ng-mouseleave

Ou quando um botão do mouse é clicado em um elemento, nesta ordem:

de mousedown
de-mouseup
de clique

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

Exemplo

Aumente a variável de contagem quando o mouse se mover sobre o 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>

A diretiva clique

A ng-click diretiva define o código AngularJS que será executado quando o elemento estiver sendo clicado.

Exemplo

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

Você também pode se referir a uma função:

Exemplo

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

Alternar, Verdadeiro/Falso

Se você deseja mostrar uma seção de código HTML quando um botão é clicado e ocultar quando o botão é clicado novamente, como um menu suspenso, faça com que o botão se comporte como um botão de alternância:

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

A showMevariável começa como o valor booleano false.

A myFuncfunção define a showMevariável para o oposto do que é, usando o !operador (not).

Objeto $evento

Você pode passar o $eventobjeto como um argumento ao chamar a função.

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

Exemplo

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

❮ Anterior Próximo ❯

Tutorial

Exemplos

Referência

Eventos AngularJS