/**

 * 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

[AngularJS] $scope.$watch的更多相关文章

  1. 【js类库AngularJs】web前端的mvc框架angularjs之hello world

    AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核 ...

  2. angularJS--神奇的$scope

    我们在使用angularJS时,$scope对于angularJS是非常重要的,它是angularJS的基础,但$scope到底是什么呢?下面进行一些介绍. 1.$scope是一个普通的js对象 2. ...

  3. JS框架~Angularjs

    无意中看到anytao的项目,工作台,使用了Angularjs框架,感觉在前端表现上用户体验比较好,于是就简单看了一下,原来使用很简单,或者说,人家把代码封装的很好,以至于开发人员调用时比较简单,呵呵 ...

  4. AngularJS 3

    AngularJS 源码分析3 本文接着上一篇讲 上一篇地址 回顾 上次说到了rootScope里的$watch方法中的解析监控表达式,即而引出了对parse的分析,今天我们接着这里继续挖代码. $w ...

  5. 转载：温故而知新 - AngularJS 1.x

    原文: http://geek.csdn.net/news/detail/102405 温故而知新 - AngularJS 1.x

  6. [转][Angularjs]$http.post与$.post

    本文转自:https://www.cnblogs.com/wolf-sun/p/6878868.html 摘要 在angularjs发送post请求的时候,确实很困惑,在传递json数据的时候,总会遇 ...

  7. Spring标签之Bean @Scope

    @Bean 的用法 @Bean是一个方法级别上的注解,主要用在@Configuration注解的类里,也可以用在@Component注解的类里.添加的bean的id为方法名 定义bean 下面是@Co ...

  8. AngularJS 从DOM中获取scope

    节选官方文档: 原文:https://docs.angularjs.org/guide/scope scope是附加在DOM上,使用了ng-app指令的DOM就是root scope.一般是<h ...

  9. angular中的scope

    angular.element($0).scope() 什么是scope? scope是一个refer to the application model的object.它是一个expression的执 ...

  10. angualar入门学习-- 作用域$scope

    作用域$scope: 是ng执行环境,视图与controller之间的胶水,双向绑定的基础 $scope提供里$watch方法,监听数据模型变化 $scope提供里$apply方法,将数据模型变化更新 ...

随机推荐

  1. 深度学习基础系列（一）| 一文看懂用kersa构建模型的各层含义（掌握输出尺寸和可训练参数数量的计算方法）

    我们在学习成熟网络模型时,如VGG.Inception.Resnet等,往往面临的第一个问题便是这些模型的各层参数是如何设置的呢?另外,我们如果要设计自己的网路模型时,又该如何设置各层参数呢?如果模型 ...

  2. javascript入门教程笔记

    BOM BOM 是“ Browser Object Model ”的缩写,简称“ 浏览器对象模型 ”. BOM 定义了 JavaScript 操作浏览器的接口,提供了访问某些功能(如浏览器窗口大小.版 ...

  3. UVALive 6907 Body Building

    题目链接:https://vjudge.net/problem/UVALive-6907 题意: 给出一张图,判断这张图中有多少个哑铃,哑铃判断的条件是,对于一个连通图:如果找到一条边连接这两个点的个 ...

  4. hdu 2709 递推

    题意:给出一个数,把他拆成2^n和的形式,问有多少种拆法 链接:点我 对6进行分析 1 1 1 1 1 1 1 1 1 1 2 1 1 2 2 1 1 4 2 2 4 2 4 对最上面4个,显然是由4 ...

  5. Java解释执行和编译执行

    以前有句话说:“Java是解释执行的 ” .现在看来确实不是很准确,至于原因,在此简略解释: 首先,我们先解释一下在Java中解释执行和编译执行的区别. 解释执行:将编译好的字节码一行一行地翻译为机器 ...

  6. SPOJ 10628. SPOJ COT Count on a tree 可持久化线段树

    这题是裸的主席树,每个节点建一棵主席树,再加个lca就可以了. 历尽艰辛,终于A掉了这一题,这般艰辛也显示出了打代码的不熟练. 错误:1.lca倍增的时候i和j写反了,RE了5次,实在要吸取教训 2. ...

  7. 设计模式 -- 访问者模式(Visitor)

    写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------主要内容包括: 初识访问者模 ...

  8. [转]Android Studio常用快捷键

    (会持续更新)这边讲的常用快捷键是指做完Keymap到Eclipse后的,不是纯Android Studio的,这边主要讲下比较常用的一些快捷键: Ctrl+G / Ctrl+Alt+Shift+G: ...

  9. wait, WIFEXITED, WEXITSTATUS

    wait, WIFEXITED, WEXITSTATUS     偶尔翻到了这几个关键字,找到个文章复习了下:“点我”.记录下: wait的函数原型是: #include <sys/types. ...

  10. javascritp 字符串截取

    1.substring 方法 定义和用法 substring 方法用于提取字符串中介于两个指定下标之间的字符. 语法 ? stringObject.substring(start,stop) 参数   ...