AngularJS tem suas próprias diretrizes eventos HTML.
Eventos AngularJS
Você pode adicionar AngularJS ouvintes de eventos para os seus elementos HTML usando uma ou mais dessas directivas:
-
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 directivas do evento nos permite executar AngularJS funções em determinados eventos do usuário.
Um evento AngularJS não irá substituir um evento HTML, ambos os eventos será executado.
eventos de rato
eventos de mouse ocorrer quando o cursor se move sobre um elemento, na seguinte ordem:
- ng-mouseenter
- ng-mouseover
- ng-mousemove
- NG-mouseleave
Ou quando um botão do mouse é clicado em um elemento, na seguinte ordem:
- ng-mousedown
- ng-mouseup
- ng-click
Você pode adicionar eventos de mouse em qualquer elemento HTML.
Exemplo
Aumentar a variável de contagem quando o mouse passa 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> Tente você mesmo " A directiva ng-click
O ng-click directiva define código AngularJS que será executada quando o elemento está 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> Tente você mesmo " 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> Tente você mesmo " Alternar, Verdadeiro / Falso
Se você quiser mostrar uma seção do código HTML quando um botão é clicado, e se esconder quando o botão é clicado novamente, como um menu suspenso, faça o botão comportar-se como um interruptor:
Cardápio:
Exemplo
<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> Tente você mesmo " O showMe variável começa como o valor booleano false .
O myFunc função define o showMe variável para o oposto do que ele é, usando o ! (Não) operador.
$ Objeto de evento
Você pode passar o $event objeto como um argumento ao chamar a função.
O $event objeto contém 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>
Tente você mesmo "