文档章节

angular $watch

h
 haiziguo
发布于 2016/12/09 11:42
字数 839
阅读 5
收藏 0

在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.cnblogs.com/lzhp/p/3849898.html

共有 人打赏支持
上一篇: 发邮件
下一篇: 多态的理解
h
粉丝 0
博文 32
码字总数 0
作品 0
东城
程序员
私信 提问
angular.js 1.4.1 发布,HTML的Web框架

angular.js 1.4.1 发布,更新内容如下: Bug 修复: **$compile:** + - workaround for IE11 MutationObserver + ([f3b1d0b7](https://github.com/angular/angular.js/commit/f3b1d0b723298a......

oschina
2015/06/17
2.5K
22
angularjs学习:$digest

angularjs扩展了javascript的事件流程机制:它会扩展这个标准的浏览器流程,创建一个Angular上下文。这个Angular上下文指的是运行在Angular事件循环内的特定代码,该Angular事件循环通常被称...

Jack_Q
2015/06/04
0
0
angular.js 1.3.17/1.4.2 发布

其中:1.3.17 更新内容如下: Bug Fixes +- **$browser:** prevent infinite digest if changing hash when there is no hashPrefix + ([61a3fb67](https://github.com/angular/angular.js/......

oschina
2015/07/07
2.6K
9
再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

Angular 的数据绑定采用什么机制,详述原理? 脏检查机制。阐释脏检查机制,必须先了解如下问题。 单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别? ng-bind 单向数据绑定($scope ->...

634117608
04/19
0
0
angularjs双向绑定后,发生了什么事情?是什么可以让view层和controller层进行绑定的?

大家好,我是IT修真院北京总院第24期的学员,一枚正直纯洁善良的web程序员 今天给大家分享一下,修真院官网js任务7,深度思考中的知识点——angularjs双向绑定后,发生了什么事情?是什么可以...

我是一只北极熊啊
2017/10/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

js垃圾回收机制和引起内存泄漏的操作

JS的垃圾回收机制了解吗? Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。 JS中最常见的垃圾回收方式是标记清除。 工作原理:是当变量进入环境时,将这个变量标记为“...

Jack088
昨天
12
0
大数据教程(10.1)倒排索引建立

前面博主介绍了sql中join功能的大数据实现,本节将继续为小伙伴们分享倒排索引的建立。 一、需求 在很多项目中,我们需要对我们的文档建立索引(如:论坛帖子);我们需要记录某个词在各个文...

em_aaron
昨天
20
0
"errcode": 41001, "errmsg": "access_token missing hint: [w.ILza05728877!]"

Postman获取微信小程序码的时候报错, errcode: 41001, errmsg: access_token missing hint 查看小程序开发api指南,原来access_token是直接当作parameter的(写在url之后),scene参数一定要...

两广总督bogang
昨天
23
0
MYSQL索引

索引的作用 索引类似书籍目录,查找数据,先查找目录,定位页码 性能影响 索引能大大减少查询数据时需要扫描的数据量,提高查询速度, 避免排序和使用临时表 将随机I/O变顺序I/O 降低写速度,占用磁...

关元
昨天
12
0
撬动世界的支点——《引爆点》读书笔记2900字优秀范文

撬动世界的支点——《引爆点》读书笔记2900字优秀范文: 作者:挽弓如月。因为加入火种协会的读书活动,最近我连续阅读了两本论述流行的大作,格拉德威尔的《引爆点》和乔纳伯杰的《疯传》。...

原创小博客
昨天
34
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部