/** * Created by Answer1215 on 11/13/2014. */ function MainCtrl($scope){ function isLongEnough (pwd) { return pwd.length > 4; } function hasNumbers (pwd) { return /[0-9]/.test(pwd); } this.watchPwd = function(newVal, oldVal){ //first init, you might got undefined if (!newVal) return; $scope.reqs = []; if (!isLongEnough(newVal)) { $scope.reqs.push('Too short'); } if (!hasNumbers(newVal)) { $scope.reqs.push('Must include numbers'); } $scope.showReqs = $scope.reqs.length; } //user.password is a string //user is an object $scope.$watch('user.password',this.watchPwd); //$watch can accept the third argument, once add it, angularJS //will do lose value checking instead of reference checking, it's quite //expensive //in all $watch is expensive, use ng-change if you can // $scope.$watch('user.password',this.watchPwd, true); } angular.module('app',[]) .controller('MainCtrl', MainCtrl);
$watch can accept the third arguement, once set it as true:
$scope.$watch('user.password',this.watchPwd, true);
AngularJS will do lose value checking instead of reference checking, it is quite expensive.
For best pratise: avoid using $watch as much as you can, instead using ng-change.
<input ng-model="myModel" ng-change="callback"> <!-- $scope.callback = function () { // go }; -->
<!DOCTYPE html> <html ng-app="app"> <head lang="en"> <meta charset="UTF-8"> <title>$watch</title> <script src="bower_components/angular/angular.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/> <style type="text/css"> .panel { width: 70%; margin: 30px auto; } </style> </head> <body ng-controller="MainCtrl"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Create Account</h3> </div> <div class="panel-body"> <form role="form"> <div class="form-group"> <label for="eml">Email address</label> <input id="eml" type="email" class="form-control" placeholder="Email address" ng-model="user.email"/> </div> <div class="form-group"> <label for="pwd">Password</label> <input id="pwd" type="password" class="form-control" placeholder="Password" ng-model="user.password" /> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> <div class="panel panel-danger" ng-show="showReqs"> <div class="panel-heading"> <h3 class="panel-title">Password Requirement</h3> </div> <div class="panel-body"> <ul> <li ng-repeat="req in reqs">{{req}}</li> </ul> </div> </div> <script src="app.js"></script> </body> </html>
Read More: https://egghead.io/lessons/angularjs-the-basics-of-scope-watch