angular $watch

转载 2015年11月19日 09:41:23

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美元的折扣。我们将会使用下面这种模板:

<divng-controller="CartController">

  <divng-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看起来可能像下面这样:

functionCartController($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;

  };

  functioncalculateDiscount(newValue, oldValue, scope) {

   $scope.bill.discount = newValue > 100 ? 10 : 0;

  }

 $scope.$watch($scope.totalCart, calculateDiscount);

}

注意CartController 的底部,我们在totalCart() 的值上面设置了一个监控,用来计算此次购物的总价。只要这个值发生变化,监控器就会调用calculateDiscount() , 然后我们就可以把折扣设置为相应的值。如果总价超过100美元,我们将会把折扣设置为10美元。否则,折扣为0。

 

来自 <http://www.cnblogs.com/lzhp/p/3849898.html

关于angularJS的$watch的 一些小用法

$watch方法,它可以帮助我们在每个scope中监视其中的变量。$watch 单一的变量对于普通的变量时,如数字,字符串等,直接如下写是可以监视到变量的变化,并执行相应的函数的。$scope.cou...
  • u010451286
  • u010451286
  • 2016年02月04日 17:24
  • 33441

angular中$watch踩的坑

html> html ng-app="myApp"> head> meta charset="UTF-8"> title>angular demotitle> script s...
  • huang100qi
  • huang100qi
  • 2016年07月10日 12:23
  • 1336

AngularJS $watch用法

$watch()执行时会先调用一次传入的回调,可以认为是初始化。 用法: $scope.name = 'zhangsan'; $scope.count=0; $scope.$watch(...
  • tiramisu_ljh
  • tiramisu_ljh
  • 2016年10月18日 11:24
  • 4456

AngularJS $watch root scope variable for changes

AngularJS $watch root scope variable for changes up v...
  • jfkidear
  • jfkidear
  • 2015年09月15日 10:09
  • 2751

angularjs 删除作用域时清除$watch

先看下面一段代码 删除内容 查看作用域 输入内容: var app = angu...
  • jian1jian_
  • jian1jian_
  • 2017年05月05日 15:16
  • 1362

Angularjs实践之优化你的$watch

comments: true title: “Angularjs实践之优化你的$watch” date: 2015-09-07 22:45:46 tags: - angularjs Ang...
  • u013588178
  • u013588178
  • 2015年09月08日 02:50
  • 868

AngularJS $watch的用法

html: html> html> head lang="en"> meta charset="UTF-8"> title>$watch监听器title> head> script ...
  • rcjjian
  • rcjjian
  • 2015年10月31日 12:29
  • 1108

angular $watch学习(监听数组)

$watch 监听数组 文章参考 http://blog.csdn.net/u010451286/article/details/50635839 问题: 发现用上面两种方法去监视数组时,会发...
  • hbiao68
  • hbiao68
  • 2016年12月18日 20:31
  • 2855

angularJS学习小结——$apply方法和$watch方法

引言    最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化,当时小编对这个方法不是很了 解,所以在网上找了一些资料来学习一下,下面小编就给大家简单介绍一些ang...
  • u013045437
  • u013045437
  • 2016年05月09日 21:18
  • 12739

angular的$watch 函数

它的函数签名为$watch(watchFn, watchAction, deepWatch) 其中每个参数的详细含义如下。 watchFn 该参数是一个带有Angular表达式或者函数的字...
  • qq_26222859
  • qq_26222859
  • 2016年10月28日 11:35
  • 511
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:angular $watch
举报原因:
原因补充:

(最多只允许输入30个字)