在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相关推荐

  1. Angular Http

    Http服务 HttpClient 是 Angular 通过 HTTP 与远程服务器通讯的机制. 启用Http服务的准备工作 要让 HttpClient 在应用中随处可用,需要在根模块的@NgModu ...

  2. dotnet new 命令使用模板生成Angular应用

    dotnet new 命令使用模板快速生成单页应用,本文以Angular应用为例. 最新版.NET Core SDK RC4 最大改动是更新了 dotnet new 命令. dotnet new 默认 ...

  3. Angular——基本使用

    基本介绍 1.AngularJS是一个框架(诸多类库的集合)以数据和逻辑做为驱动(核心). 2.AngularJS有着诸多特性,最为核心的是:模块化.双向数据绑定.语义化标签.依赖注入等. 模块化 使 ...

  4. 解决vue在ios或android中用webview打开H5链接时#号后面的参数被忽略问题angular同样适用

    解决vue在ios或android中用webview打开H5链接时#号后面的参数被忽略问题angular同样适用 参考文章: (1)解决vue在ios或android中用webview打开H5链接时# ...

  5. 图书馆自动化系统 Evergreen 3.3 发布,迁移到 Angular

    百度智能云 云生态狂欢季 热门云产品1折起>>>   Evergreen 3.3 发布了,Evergreen 是一个开源的图书馆自动化(ILS)系统,读者可以万维网实现图书的查找和借 ...

  6. 移动网站用backbone还是angular?

    移动网站用backbone还是angular? 作者:戴嘉华 链接:https://www.zhihu.com/question/21871888/answer/26130922 来源:知乎 著作权归 ...

  7. yo 搭建angular应用

    yeoman 搭建angular应用 安装: node 5.0版本 yeoman bower gulp npm install -g bower yo generator-angular //等待安装 ...

  8. php中angular,Angular是什么

    Angular是一种用于创建单一应用程序界面的前端框架,它有许多核心功能例如数据绑定,服务,指令以及依赖注入等等.它具有模块功能强大,拥有自定义命令等优点 Angular的介绍 AngularJS由M ...

  9. 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 ...

最新文章

  1. Spring Boot项目错误:Error parsing lifecycle processing instructions
  2. 通过padding-bottom或者padding-top实现等比缩放响应式图片
  3. 关于 php 用webservice传输数据的问题(nosoap与.NET对接)此处一直困扰三天时间,终于解决...
  4. ARM指令CMP详解
  5. (转)awk实例练习(二)
  6. 关于前端样式定位的一些自己的看法
  7. 使用CrossOver的Wine配置修改容器WIndows系统版本
  8. python学习视频下载地址全套
  9. Lenovo预装系统激活工具
  10. 硬盘文件系统系列专题之二 NTFS
  11. AppCan西游汇“移动互联网创业者技术沙龙” (重庆站)
  12. 模电设计学习笔记(二)——反相放大电路
  13. 微服务架构总结性介绍 (深度好文)
  14. InnoSetup打包自动签名
  15. 怎么求最大公因数和最小公倍数
  16. SPA项目开发(首页导航左侧菜单)
  17. rst 格式文档编译方案
  18. 如何解决eclipse黑底白字快速需求
  19. STM32 RS485传输ADC值代码
  20. 电感/晶振布局布线要求

热门文章

  1. Java EE启示录
  2. Linux下c/c++项目代码覆盖率的产生方法
  3. Hibernate type 与java 和 数据库类型对应
  4. 个人站立会议-----20181216
  5. Flask博客开发——Tinymce编辑器
  6. CSS选择器的权重与优先规
  7. 【转】Linux中断处理学习笔记
  8. Shell 控制并发
  9. Java 关于中文乱码处理的经验总结
  10. 西电开源社区Ubuntu 10.04软件源