angular $watch
在scope内置的所有函数中,用得最多的可能就是$watch 函数了,当你的数据模型中某一部分发生变化时,$watch函数可以向你发出通知。你可以监控单个对象的属性,也可以监控需要经过计算的结果(函数),实际上只要能够被当作属性访问到,或者可以当作一个JavaScript函数被计算出来,就可以被$watch 函数监控。它的函数签名为$watch(watchFn, watchAction, deepWatch)
其中每个参数的详细含义如下。
watchFn
该参数是一个带有Angular表达式或者函数的字符串,它会返回被监控的数据模型的当前值。这个表达式将会被执行很多次,所以你要保证它不会产生其他副作用。也就是说,要保证它可以被调用很多次而不会改变状态。基于同样的原因,监控表达式应该很容易被计算出来。如果你使用字符串传递了一个Angular表达式,那么它将会针对调用它的那个作用域中的对象而执行。
watchAction
这是一个函数或者表达式,当watchFn 发生变化时会被调用。如果是函数的形式,它将会接收到watchFn的新旧两个值,以及作用域对象的引用。其函数签名为function(newValue, oldValue, scope)。
deepWatch
如果设置为true,这个可选的布尔型参数将会命令Angular去检查被监控对象的每个属性是否发生了变化。如果你想要监控数组中的元素,或者对象上的所有属性,而不只是监控一个简单的值,你就可以使用这个参数。由于Angular需要遍历数组或者对象,如果集合比较大,那么运算负担就会比较重。
$watch 函数会返回一个函数,当你不再需要接收变更通知时,可以用这个返回的函数注销监控器。
如果我们需要监控一个属性,然后接着注销监控,我们可以使用以下代码:
...
var dereg = $scope.$watch('someModel.someProperty', callbackOnChange());
…
dereg();
我们再回到第1章的购物车案例,把它的功能扩充完整。例如,当用户添加到购物车中的商品价值超过100美元的时候,我们会给他10美元的折扣。我们将会使用下面这种模板:
<div ng-controller="CartController">
<div ng-repeat="item in items">
<span>{{item.title}}</span>
<input ng-model="item.quantity">
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
</div>
<div>Total: {{totalCart() | currency}}</div>
<div>Discount: {{bill.discount | currency}}</div>
<div>Subtotal: {{subtotal() | currency}}</div>
</div>
而CartController看起来可能像下面这样:
function CartController($scope) {
$scope.bill = {};
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.totalCart = function() {
var total = 0;
for (var i = 0, len = $scope.items.length; i < len; i++) {
total = total + $scope.items[i].price * $scope.items[i].quantity;
}
return total;
}
$scope.subtotal = function() {
return $scope.totalCart() - $scope.discount;
};
function calculateDiscount(newValue, oldValue, scope) {
$scope.bill.discount = newValue > 100 ? 10 : 0;
}
$scope.$watch($scope.totalCart, calculateDiscount);
}
注意CartController 的底部,我们在totalCart() 的值上面设置了一个监控,用来计算此次购物的总价。只要这个值发生变化,监控器就会调用calculateDiscount() , 然后我们就可以把折扣设置为相应的值。如果总价超过100美元,我们将会把折扣设置为10美元。否则,折扣为0。
angular
angular $watch相关推荐
- Angular Http
Http服务 HttpClient 是 Angular 通过 HTTP 与远程服务器通讯的机制. 启用Http服务的准备工作 要让 HttpClient 在应用中随处可用,需要在根模块的@NgModu ...
- dotnet new 命令使用模板生成Angular应用
dotnet new 命令使用模板快速生成单页应用,本文以Angular应用为例. 最新版.NET Core SDK RC4 最大改动是更新了 dotnet new 命令. dotnet new 默认 ...
- Angular——基本使用
基本介绍 1.AngularJS是一个框架(诸多类库的集合)以数据和逻辑做为驱动(核心). 2.AngularJS有着诸多特性,最为核心的是:模块化.双向数据绑定.语义化标签.依赖注入等. 模块化 使 ...
- 解决vue在ios或android中用webview打开H5链接时#号后面的参数被忽略问题angular同样适用
解决vue在ios或android中用webview打开H5链接时#号后面的参数被忽略问题angular同样适用 参考文章: (1)解决vue在ios或android中用webview打开H5链接时# ...
- 图书馆自动化系统 Evergreen 3.3 发布,迁移到 Angular
百度智能云 云生态狂欢季 热门云产品1折起>>> Evergreen 3.3 发布了,Evergreen 是一个开源的图书馆自动化(ILS)系统,读者可以万维网实现图书的查找和借 ...
- 移动网站用backbone还是angular?
移动网站用backbone还是angular? 作者:戴嘉华 链接:https://www.zhihu.com/question/21871888/answer/26130922 来源:知乎 著作权归 ...
- yo 搭建angular应用
yeoman 搭建angular应用 安装: node 5.0版本 yeoman bower gulp npm install -g bower yo generator-angular //等待安装 ...
- php中angular,Angular是什么
Angular是一种用于创建单一应用程序界面的前端框架,它有许多核心功能例如数据绑定,服务,指令以及依赖注入等等.它具有模块功能强大,拥有自定义命令等优点 Angular的介绍 AngularJS由M ...
- ng: Can't bind to 'ngModel' since it isn't a known property of 'input'. - Angular 6
[出现的问题]ng: Can't bind to 'ngModel' since it isn't a known property of 'input'. [解决方法]导入 FormsModule ...
最新文章
- Spring Boot项目错误:Error parsing lifecycle processing instructions
- 通过padding-bottom或者padding-top实现等比缩放响应式图片
- 关于 php 用webservice传输数据的问题(nosoap与.NET对接)此处一直困扰三天时间,终于解决...
- ARM指令CMP详解
- (转)awk实例练习(二)
- 关于前端样式定位的一些自己的看法
- 使用CrossOver的Wine配置修改容器WIndows系统版本
- python学习视频下载地址全套
- Lenovo预装系统激活工具
- 硬盘文件系统系列专题之二 NTFS
- AppCan西游汇“移动互联网创业者技术沙龙” (重庆站)
- 模电设计学习笔记(二)——反相放大电路
- 微服务架构总结性介绍 (深度好文)
- InnoSetup打包自动签名
- 怎么求最大公因数和最小公倍数
- SPA项目开发(首页导航左侧菜单)
- rst 格式文档编译方案
- 如何解决eclipse黑底白字快速需求
- STM32 RS485传输ADC值代码
- 电感/晶振布局布线要求