<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. 【记录】Mysql 5.7 解压版的安装

    1.解压 2.打开my_default.ini 将basedir修改为MySQL的解压目录 将datadir修改为MySQL的解压目录\data 3.更改环境变量 系统变量里面添加MYSQL_HOME ...

  2. CTF西湖论剑

    一,西湖论剑 itoa()函数有3个参数:第一个参数是要转换的数字,第二个参数是要写入转换结果的目标字符串,第三个参数是转移数字时所用 的基数.在上例中,转换基数为10.10:十进制:2:二进制... ...

  3. js代码小优化

    今天真坑,老大请了两天假,来了之后指指点点,不过人家说的倒是很是到位 好不容易把嵌套小窗口登陆注册功能,做完了,直接调之前写好的登陆注册功能,也就是页面跳转 并不是ajax异步登陆 说让改成ajax ...

  4. CentOS7 安装Python3.6.4

    1. 安装依赖环境 # yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline- ...

  5. Python操作Mongo数据库

    连接数据库 import pymongo # 连接到数据库,以下两种方式均可 client = pymongo.MongoClient(host='localhost', port=27017) cl ...

  6. 【BZOJ 3235】 3235: [Ahoi2013]好方的蛇 (单调栈+容斥原理)

    3235: [Ahoi2013]好方的蛇 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 187  Solved: 95 Description 有一天, ...

  7. 《pyhton学习手册》 第33章 异常编码细节

    try/except/else语句 这些语句的一般的格式如下图所示 其中try中定义了主要执行的动作.except中定义了try语句当中发生异常的处理器.else定义了没有发生异常时候的处理器. tr ...

  8. 快速排序及查找第K个大的数。

    本文提供了一种基于分治法思想的,查找第K个大的数,可以使得时间复杂地低于nlogn. 因为快排的平均时间复杂度为nlogn,但是快排是全部序列的排序, 本文查找第k大的数,则不必对整个序列进行排序.请 ...

  9. SDRAM interface slashes pin count

    Many designs need deep buffering but don't require ultrahigh-memory bandwidth. Examples include imag ...

  10. java.lang.RuntimeException: java.io.IOException: invalid constant type: 15

    java.lang.RuntimeException: java.io.IOException: invalid constant type: 15 controller通过dubbo调用servic ...