Angular watch nos permite añadir flexibilidad a nuestras aplicaciones angular.js. Una de las grandes ventajas de angular.js es su capacidad para realizar un binding bidireccional entre los objetos que se encuentran en el scope y las plantillas que utilizamos. De tal forma que cualquier cambio que se produzca en un objeto se actualice en las plantillas.
Vamos a verlo a través de un ejemplo sencillo con una caja de texto que rellenamos con una nota:
<html ng-app="miapp">
<head>
<script type="text/javascript" src="angular.min.js">
</script>
<script type="text/javascript">
angular.module('miapp',[]).controller("controladorA",function($scope) {
$scope.numero=5;
});
</script>
</head>
<body>
<div ng-controller="controladorA">
<p>{{numero}}</p>
<form>
Nota del examen<input type="text" ng-model="numero"/>
</form>
</div>
</body>
</html>
Según escribamos una nota en la caja de texto angular.js el número en el párrafo se actualiza automáticamente .
Angular Watch
El problema le tenemos cuando queremos que cuando se cambie la nota el mensaje cambie por “aprobado” o “suspenso”. Esto angular ya no lo puede realizar de forma automática. Para poder abordar lo necesitamos crearnos un watcher dentro de nuestro controlador.
$scope.$watch(function(scope) {
return scope.numero;
},
function(nuevo,viejo) {
if (nuevo>=5) {
$scope.mensaje="has aprobado";
}
else {
$scope.mensaje="has suspendido";
}
});
Un watcher es un objeto de angular que se encarga de vigilar los cambios que se producen sobre una variable y reaccionar a ellos.
En este caso cada vez que el número cambie cambiamos la variable mensaje por “aprobado” o “suspenso” . Para que esto funcione correctamente modificaremos la plantilla de la siguiente forma.
<body>
<div ng-controller="controladorA">
<p>{{mensaje}}</p>
<form>
Nota del examen<input type="text" ng-model="numero"/>
</form>
</div>
</body>
Ahora cada vez que cambiemos el valor de la caja de texto la expresión de mensaje cambiará por “aprobado” o “suspenso”
Los watchers son elementos muy útiles para las aplicaciones basadas en angular.js
Otros artículos relacionados:Angular e Inyección de dependencias , Libro Angular ,Angular Batarang
[…] artículos relacionados : Angular Libro , Angular Watch , ¿Cómo […]