[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 ...
随机推荐
- python3 怎么爬取新闻网站?
先开个坑,以后再填吧....... import requests from bs4 import BeautifulSoup def content(url): text = requests.ge ...
- jquery DOM操作(一)
上一篇文章是记录了jquery中选择器的作用,这里只要记录下jquery中的DOM操作,还是按照上篇的格式来. 下面是测试用的html代码,接下来DOM的操作会在下面的代码下进行. <body& ...
- Calendar日期方法
面试居然让我获取当前月份第一天跟最后一天,主要是尴尬的回答不上来. 废话不说,直接贴代码,工作应该是够用了 public class TestCalendar { // 日期也就是这了 public ...
- Xcode真机调试初体验
1. 开发者证书(Certificates) 分为开发(iOS Development)和发布(iOS Distribution)两种,无论是真机调试,还是上传到App Store都需要该证书,是一个 ...
- 顺序存储线性表_ArrayList
相信大家在日常开发过程中 List 应该使用的非常非常多,今天就来简单学习一下 List 的数据结构 顺序存储线性表. 一.什么是顺序存储线性表 顺序存储线性表是最基本.最简单.也是最常用的一种数据结 ...
- Hibernate 使用MyEclipse简化开发
在平时开发中写配置文件比较繁琐,在这里写一下如何使用myEclipse简化开发. 1.打开MyEclipse,创建数据库连接 单机测试连接按钮,如果出现成功建立连接,则连接成功. 然后Finish 2 ...
- 【BZOJ 4171】 4171: Rhl的游戏 (高斯消元)
4171: Rhl的游戏 Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 74 Solved: 33[Submit][Status][Discuss] ...
- BZOJ1975 SDOI2010魔法猪学院
就是个A*,具体原理可以参考VANE的博文. 正解要手写堆,会被卡常,也许哪天我筋搭错了写一回吧. #include<bits/stdc++.h> #define r register u ...
- WordPress插件会员简化1.58 -任意文件下载漏洞(附poc)
今天我们将讨论在WordPress插件WordPress插件与重点会员简化v1.58作为这个剧本的创作时间不打补丁的扶贫开发实践.脆弱脚本如下: CVE-ID:cve-2017-1002008 当然, ...
- C++ -- STL泛型编程(一)之vector
STL提供三种组件:容器,迭代器,算法,它们都支持泛型程序设计标准容器有两类:顺序容器和关联容器. 顺序容器(vector,list,deque,string等)是一系列元素的有序组合. 关联容器(s ...