<div class="form-group">
<label for="pwd">Password</label>
<input id="pwd"
type="password"
class="form-control"
placeholder="Password"
ng-change="onChange()"
ng-model="user.password"> ---------------------------------
//ngChange
$scope.onChange=function(){
var newVal = $scope.user.password;
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;
}

For a form, when user type on the input field, both ngChange and $watch will get fired.

The difference between ngChange and $watch is :

ngChange:

If I click "Please Hack Me," you can see the value change but we don't get our warnings back.

            <button class="btn btn-danger"
ng-click="user.password = 'pwd'">Please Hack Me</button>

The reason for that is ng-change only reacts to changes in the actual form element that you have declared it on. If your value changes programmatically as the result of anything but actually interacting with the element ng-change is not going to fire.

$watch:

$watch is not recommended by Angular team, because it is expensive. In most cases, when monitor the form elements, we can use ngChange instead of $watch.

But for the case value changes programmatically, you have to use $watch.

[AngularJS] ng-change vs $scope.$watch的更多相关文章

  1. JavaScript外部函数调用AngularJS的函数、$scope

    x 场景: 需要在用FusionCharts画的柱状图中添加点击事件,But弹出框是Angularjs搞的,我想的是直接跳到弹出框的那个路由里,然后在弹出框的控制器中绑定数据即可: /* 点击事件 * ...

  2. Part 39 AngularJS route change events

    In this video we will discuss1. Different events that are triggered when a route change occurs in an ...

  3. Part 6 AngularJS ng repeat directive

    ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we ...

  4. part 4 AngularJS ng src directive

  5. 控制台获取AngularJS某个元素的Scope

    如何在控制台获取到某个元素的Scope呢? 假设,页面元素为: <label>Name:</label><input type="text" ng-m ...

  6. angularjs指令中的scope

    共享 scope 使用共享 scope 的时候,可以直接从父 scope 中共享属性.因此下面示例可以将那么属性的值输出出来.使用的是父 scope 中定义的值. js代码: app.controll ...

  7. Part 34 AngularJS controller as vs scope

    There are 2 ways to expose the members from the controller to the view - $scope and CONTROLLER AS. T ...

  8. Part 15 AngularJS ng init directive

    The ng-init directive allows you to evaluate an expression in the current scope.  In the following e ...

  9. AngularJS 3

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

  10. 一步一步弄懂angularJS基础

    问题1:ng-app指令的使用以及自定义指令 <!doctype html> <!--这里的ng-app的属性值就是模块的名称,也就是 angular.module("My ...

随机推荐

  1. Java常用工具类之自定义访问对象

    package com.wazn.learn.util; import javax.servlet.http.HttpServletRequest; /** * 自定义访问对象工具类 * * 获取对象 ...

  2. 路由跟踪工具0trace

    路由跟踪工具0trace   0trace是Kali Linuz自带的一个Shell脚本工具.该工具基于已建立的TCP连接,进行路由探测,实现侦查和防火墙穿透功能.使用时候,用户首先使用Telnet之 ...

  3. python tesseract 识别图片中的文字的乱码问题(ubuntu系统下)

    OCR(Optical Character Recognition):光学字符识别,是指对图片文件中的文字进行分析识别,获取的过程. 首先,需要安装 tesseract-ocr(tesseract O ...

  4. 洛谷P4009 汽车加油行驶问题

    题目描述 给定一个 N \times NN×N 的方形网格,设其左上角为起点◎,坐标(1,1)(1,1),XX 轴向右为正, YY 轴向下为正,每个方格边长为 11 ,如图所示. 一辆汽车从起点◎出发 ...

  5. php上传中文文件文件名乱码问题

    php上传文件是最最基础的一个技术点,但是深入进去也有不少问题需要解决,这不,上传中文文件后,文件名变成了乱码. 下面是问题代码,很简单: 1.问题代码 html部分: <html> &l ...

  6. bzoj 2428: [HAOI2006]均分数据 随机化

    2428: [HAOI2006]均分数据 Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/ ...

  7. 2015 UESTC 搜索专题E题 吴队长征婚 爆搜

    吴队长征婚 Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/contest/show/61 Descri ...

  8. CodeM资格赛2

    题目描述 组委会正在为美团点评CodeM大赛的决赛设计新赛制. 比赛有 n 个人参加(其中 n 为2的幂),每个参赛者根据资格赛和预赛.复赛的成绩,会有不同的积分.比赛采取锦标赛赛制,分轮次进行,设某 ...

  9. Swift 自定义打印方法

    Swift 自定义打印方法 代码如下 // MARK:- 自定义打印方法 func MLLog<T>(_ message : T, file : String = #file, funcN ...

  10. TCP/IP协议栈与数据报封装 (802.3 Ethernet 以太网 802.11 WLAN 无线网 )

    http://blog.csdn.net/jnu_simba/article/details/8957242 一.ISO/OSI参考模型 OSI(open system interconnection ...