Serie AngularJS: Usando o $watch – Parte 14
No artigo de hoje vamos ver como usar o $watch no angular.
Olá, pessoal!
No artigo 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 e-mail e senha habilitamos o botão login. É isso que vamos ver com o $watch. Ele faz sync com um elemento.
Para esse exemplo, vamos usar o projeto recipeangularexample, que já estamos usando nos últimos artigos. Portanto vou considerar que você tem a estrutura do projeto conforme estamos evoluindo desde o último artigo. 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?
Abraços!
é Bacharel em Sistemas de Informação e Especialista em Gestão e Estratégia de Negócios. Trabalha com TI desde 2003 e possui as certificações SCJP 5 e SCM. Trabalhou na IBM Brasil como Analista Programador Java, passou pelo laboratório da Enterprise Computing Lab (ECL) HP como Software Engineer, Ci&T como Engenheiro de Software em projeto JEE. Tem experiência internacional em Índia, Dubai e Londres. Atualmente é cofundador da ITSLabs (www.itslabs.com.br), uma start-up focada na criação de produtos web e mobile para start-ups. Também é autor dos livros "Guia do Exame SCJP", "Guia Prático JEE com Frameworks" e "TDD na prática".
