[AngularJS] $scope.$watch 

/**
 * 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

posted @ 2014-11-13 07:19  Zhentiw  阅读(512)  评论(0)  编辑  收藏  举报