Tutorial #17 del curso de angular js, en este tutorial nos adentramos a la utilización de eventos estos nos permiten añadir interactividad a nuestras aplicaciones y empezamos viendo los eventos relacionados con el mouse como click, mouseenter y mouseleave.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Eventos Angular JS</title>
<script type="text/javascript" src="angular.min.js"></script>
<style>
#cuadrado{ background: red; width: 100px; height: 100px; margin: 30px 10px;}
</style>
</head>
<body ng-app="eventosApp">
<div ng-controller="eventosController">
<button ng-click="saludo()">Click</button>
<button ng-dblclick="saludo()">Doble Click</button>
<p ng-click="saludo()">También funciona en párrafos</p>
<strong>{{conteoClicks}}</strong>
<div id="cuadrado" ng-mouseenter="dentroDelDiv()" ng-mouseleave="fueraDelDiv()"></div>
<strong>Estado {{estado}}</strong>
</div>
<script type="text/javascript">
var miApp = angular.module('eventosApp', []);
miApp.controller('eventosController',function($scope){
$scope.estado = 'mouse';
$scope.conteoClicks = 0;
$scope.saludo = function(){
$scope.conteoClicks++;
}
$scope.dentroDelDiv = function(){
$scope.estado = 'MouseEnter activo';
}
$scope.fueraDelDiv = function(){
$scope.estado = 'MouseLeave Fuera';
}
});
</script>
</body>
</html>