[AngularJS] ng-change vs $scope.$watch

<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的更多相关文章
- JavaScript外部函数调用AngularJS的函数、$scope
x 场景: 需要在用FusionCharts画的柱状图中添加点击事件,But弹出框是Angularjs搞的,我想的是直接跳到弹出框的那个路由里,然后在弹出框的控制器中绑定数据即可: /* 点击事件 * ...
- Part 39 AngularJS route change events
In this video we will discuss1. Different events that are triggered when a route change occurs in an ...
- 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 ...
- part 4 AngularJS ng src directive
- 控制台获取AngularJS某个元素的Scope
如何在控制台获取到某个元素的Scope呢? 假设,页面元素为: <label>Name:</label><input type="text" ng-m ...
- angularjs指令中的scope
共享 scope 使用共享 scope 的时候,可以直接从父 scope 中共享属性.因此下面示例可以将那么属性的值输出出来.使用的是父 scope 中定义的值. js代码: app.controll ...
- 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 ...
- Part 15 AngularJS ng init directive
The ng-init directive allows you to evaluate an expression in the current scope. In the following e ...
- AngularJS 3
AngularJS 源码分析3 本文接着上一篇讲 上一篇地址 回顾 上次说到了rootScope里的$watch方法中的解析监控表达式,即而引出了对parse的分析,今天我们接着这里继续挖代码. $w ...
- 一步一步弄懂angularJS基础
问题1:ng-app指令的使用以及自定义指令 <!doctype html> <!--这里的ng-app的属性值就是模块的名称,也就是 angular.module("My ...
随机推荐
- PHP变量的使用
如果在用到数据时,需要用到多次就声明为变量使用: 变量的声明 $变量名=值 强类型语言中(C,Java),声明变量一定要先指定类型(酒瓶) PHP是弱类型的语言:变量的类型有存储的值决定.(瓶子) 2 ...
- ubuntu16.04.2安装完后重启报错[sda] Assuming drive cache: write through
原因:检测主机的物理连接线,发生问题时"已连接"未勾选,重启的时候找不到iso文件 解决办法:勾选"已连接",重启机器成功
- SDOI 2017 Round1 解题报告
Day 1 T1 数字表格 题目大意 · 求\(\prod\limits_{i=1}^n\prod\limits_{j=1}^mFibonacci(\gcd(i,j))\),\(T\leq1000\) ...
- 洛谷P1149 火柴棒等式
题目描述 给你n根火柴棍,你可以拼出多少个形如“A+B=C”的等式?等式中的A.B.C是用火柴棍拼出的整数(若该数非零,则最高位不能是0).用火柴棍拼数字0-9的拼法如图所示: 注意: 1.加号与等号 ...
- 记一次初步Linux提权
前言. 提权这么久了 还是头一次提下Linux的服务器... 由于之前一直钻研的win服务器 要不是前些日子爆出来Struts2-045漏洞 估计还没时间接触Linux提权.... 正文. st2 ...
- Java并发(十六):并发工具类——Exchanger
Exchanger(交换者)是一个用于线程间协作的工具类.Exchanger用于进行线程间的数据交换.它提供一个同步点,在这个同步点两个线程可以交换彼此的数据.这两个线程通过exchange方法交换数 ...
- Makefile-函数patsubst
比方说你在makefile里定义了一个变量,内容是一堆 .c 文件的的名字,如 SRC = aaa.c bbb.c my.c his.c你可以用 patsubst 根据某种模式,将这些名字改成另外的, ...
- JSON 与 JS 对象的关系
很多人搞不清楚 JSON 和 Js 对象的关系,甚至连谁是谁都不清楚.简单来说: JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串. 如 var obj ...
- Pandas中Series和DataFrame的索引
在对Series对象和DataFrame对象进行索引的时候要明确这么一个概念:是使用下标进行索引,还是使用关键字进行索引.比如list进行索引的时候使用的是下标,而dict索引的时候使用的是关键字. ...
- React Native中树 TreeView 实现(2)
接上文,剩下的展示工作是重中之重,首先确定节点的布局草稿——也就是如何render item: 在此之前还有一个重要的问题就是选择何种组件盛放展示子结点,一般有如下两种: 使用scrollview加载 ...