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 […]