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!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?