Olá Pessoal,
No post de hoje vamos ver como usar o $watch no angular. Mas pra que serve? Bem, se você já trabalhou com JSF ou JavaScript puro certamente algum dia teve que implementar em algum elemento alguma ação após alteração de um campo. Por exemplo, após digitar o usuário, digitar o email e senha habilitamos o botão login. É isso que vamos ver com o $watch, ele faz sync com um elemento.
Lets go…
Starting…
Para esse exemplo vamos usar o projeto recipeangularexample, que já estamos usando nos últimos posts, portanto vou considerar que você tem a estrutura do projeto conforme estamos evoluindo desde o último post. Se você baixar a versão do GitHub terá o projeto completo com tudo que veremos na série.
Development
A implementação é bem simples, vejamos:
Alterando recipeController.js
var recipeController = function ($scope){
$scope.name=””;
//é aqui que está mágica
$scope.$watch(“name”,function(newValue,oldValue){
if($scope.name.length > 0){
$scope.greeting = “Greeting ” + $scope.name;
}
});
};
Alterando o arquivo watch.html
<body>
<div>
<input type=“text” ng-model=“name”>
<p>{{greeting}}
</div>
</body>
Resultado:
Simples, não?
Abracos, see ya!!