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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/299466.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C# 读写ACCESS的OLE对象,演示图片与长文件的读写

网络上的读写OLE对象的代码是多&#xff0c;不过多是转载的&#xff0c;大部分人从来都没实际测试过&#xff0c;只是COPY来COPY去。我重来没看到一个真正可以运行的东东。没办法&#xff0c;只有自力更生&#xff0c;花了一点时间出了点研究成果&#xff0c;写到这里做个记录。…

RHCE课程-初级部分6、编辑工具VIM,网络配置,进程优先,日志文件简介。

我们通常用各种编辑工具来处理文本文件 常用的编辑工具:VIVIMEMACSVI和VIM的区别它们都是多模式编辑器&#xff0c;不同的是vim 是vi的升级版本&#xff0c;它不仅兼容vi的所有指令&#xff0c;而且还有一些新的特性在里面。vim的这些优势主要体现在以下几个方面&#xff1a;易…

WPF等待动画

WPF开发者QQ群&#xff1a; 340500857 | 微信群 -> 进入公众号主页 加入组织欢迎转发、分享、点赞、在看&#xff0c;谢谢~。 01—效果预览效果预览&#xff08;更多效果请下载源码体验&#xff09;&#xff1a;02—代码如下一、CycleLoading.cs 代码如下using System.Win…

假期别在家里要发霉了?可以靠他们度过无聊时光

全世界只有3.14 % 的人关注了青少年数学之旅在这个资讯丰富且易获取的时代&#xff0c;越来越多的人不愿意花时间阅读书籍&#xff0c;碎片化阅读成了主流。人们获取的东西多而杂&#xff0c;很难系统、全面。海量信息对人是冲击&#xff0c;更是诱惑。谁不想了解天下奇闻&…

cs6序列号 mac版photoshop_重磅!Parallels Desktop 16 M1版发布

Parallels 现已发布 Parallels Desktop 16 技术预览版&#xff0c;可以在搭载 M1 芯片的 Mac 电脑上运行。该公司表示&#xff0c;它创建了一个 “使用 Apple M1 Mac 芯片硬件辅助虚拟化的新虚拟化引擎”&#xff0c;允许用户在虚拟机中运行基于 Arm 的操作系统&#xff0c;例如…

华为二面!!!面试官直接问我Java中到底什么是NIO?这不是直接送分题???

华为二面&#xff01;&#xff01;&#xff01;面试官直接问我Java中到底什么是NIO&#xff1f;这不是直接送分题&#xff1f;&#xff1f;&#xff1f;什么是NIO缓冲区(Buffer)缓冲区类型获取缓冲区核心属性核心方法非直接缓冲区和直接缓冲区非直接缓冲区直接缓冲区通道(Chann…

REST

REST 定义了一组体系架构原则&#xff0c;您可以根据这些原则设计以系统资源为中心的 Web 服务REST 对 Web 的影响非常大&#xff0c;由于其使用相当方便&#xff0c;已经普遍地取代了基于 SOAP 和 WSDL 的接口设计。REST Web 服务&#xff0c;其具体实现应该遵循四个基本设计原…

Delphi中的容器类(3)

TBucketList和TObjectBucketList类 从Delphi6开始&#xff0c;VCL的Contnrs单元中又增加了两个新的容器类TBucketList和TObjectBucketList。TBucketList实际上也是一个简单基于哈希表的指针-指针对列表。接口定义如下&#xff1a; TBucketList class(TCustomBucketList)… pu…

修改PATH导致fedora无法登录XWindow

用过fedora的都了解到&#xff0c;如果要使用像ifconfig,arp等这些外部命令&#xff0c;就必需加入路径&#xff0c;有点麻烦&#xff08;我懒人一个-_-&#xff09;。所以我就在/etc/profile文件结尾处加入了一行&#xff1a;export PATH$PATH:/sbin很好&#xff0c;感觉上没问…

一文读懂哈希和一致性哈希算法

哈希 Hash 算法介绍哈希算法也叫散列算法, 不过英文单词都是 Hash, 简单一句话概括, 就是可以把任意长度的输入信息通过算法变换成固定长度的输出信息, 输出信息也就是哈希值, 通常哈希值的格式是16进制或者是10进制, 比如下面的使用 md5 哈希算法的示例md5("123456"…

延迟开学?这些教育读书公众号可以帮助孩子学习! 你都关注了吗?

全世界只有3.14 % 的人关注了青少年数学之旅受新型冠状病毒疫情影响&#xff0c;日前&#xff0c;教育部印发《关于2020年春季学期延期开学的通知》。推迟开学时间&#xff0c;意味着寒假的延长。为此&#xff0c;小编精选这些优质的教育号和读书号帮助孩子学习&#xff01;理想…

go方法的深入探究(7.21增补)

2019独角兽企业重金招聘Python工程师标准>>> 1&#xff09;哪些类型可以有方法&#xff1a; 1&#xff09;只能对命名类型和命名类型的指针编写方法&#xff1b; 2&#xff09;不能对接口类型和接口类型的指针编写方法&#xff1b; 3&#xff09;只能在定义命名类型…

element文件上传有文件但是后台接收为空_程序员提高篇:大规格文件(G)是如何做分片优化的?...

作者&#xff1a;凹凸实验室 链接&#xff1a;https://juejin.im/post/5ebb4346e51d451ef53793ad整体思路第一步是结合项目背景&#xff0c;调研比较优化的解决方案。 文件上传失败是老生常谈的问题&#xff0c;常用方案是将一个大文件切片成多个小文件&#xff0c;并行请求接口…

你连简单的枚举类都不知道,还敢说自己会Java???滚出我的公司

枚举类型是Java 5中新增的特性&#xff0c;它是一种特殊的数据类型&#xff0c;之所以特殊是因为它既是一种类(class)类型却又比类类型多了些特殊的约束&#xff0c;但是这些约束的存在也造就了枚举类型的简洁性、安全性以及便捷性。当需要定义一组常量时&#xff0c;强烈建议使…

爱情第七课,被爱的秘密

我们都想要被爱。 这和懒着&#xff0c;却想有好东西吃时的心态一样。但爱的需要却和生理需要不同&#xff0c;它是一种更高级的精神需要。 在小时候&#xff0c;我们还不懂得什么是爱时&#xff0c;就接收到父母爱的信号&#xff1a;被照顾&#xff0c;被养育&#xff0c;被善…

很好用的ISO制作软件

我一直在用 很小 很实在转载于:https://blog.51cto.com/windows2008/114161

Asp.NET Core 中如何加密 Configuration ?

咨询区 Ovi&#xff1a;web.config 已进入历史垃圾堆&#xff0c;请问现在的 asp.net core 如何更好的做到将敏感信息(password,token) 存储到 configuration 中&#xff1f;换句话说&#xff1a;是否可以自动化解密 appsettings.json 中的 configuration p 节中加密的内容。回…

时隔两年 重新当码农

FIGHTING 转载于:https://www.cnblogs.com/zy691357966/p/5480494.html

早教机器人刷固件_机器人线刷包_机器人刷机包_机器人固件包_机器人救砖包 - 线刷宝ROM中心...

线刷宝用户协议本协议是用户 (自然人、法人或社会团体)与杭州登先网络科技有限公司(以下简称"登先网络")之间关于"线刷宝"软件产品(以下简称"本软件产品")的法律协议。一旦安装、复制或以其他方式使用本软件产品&#xff0c;即表示同意接受协议各…

绝对硬核!万物有“理”,科学原来如此有趣!

▲ 点击查看假如在生活中&#xff0c;你不小心将生鸡蛋和熟鸡蛋混在一起了&#xff0c;那么此时你要如何分辨&#xff0c;哪个鸡蛋是生的&#xff0c;哪个是熟的呢&#xff1f;假若你曾学过力学&#xff0c;那你一定能够轻易的分辨这个生熟问题。我们把这两个鸡蛋放在桌上&…