AngualrJS(十四)$watch 1
来源:互联网 发布:淘宝如何查看累计消费 编辑:程序博客网 时间:2024/06/17 01:18
转载地址:http://www.cnblogs.com/liulangmao/p/3722885.html
本篇主要介绍$watch的基本概念:
$watch是所有控制器的$scope中内置的方法:
$scope.$watch(watchObj,watchCallback,ifDeep)
watchObj:
需要被检测的对象,可以是以下任意一种:
1. 某个数据,监测这个数据的值是否发生变化
2. 一条angular表达式,监测表达式的结果是否发生变化
3. 函数(),监测函数的返回值是否发生变化
注意,以上三种,无论是哪种,都应该是字符串格式,并且都是在$scope作用域下执行的.
4.函数,非字符串格式,而是直接传入一个函数,可以直接写一个匿名函数,也可以传入一个函数,注意,它不是在$scope作用域下的,所以,如果传入的是当前作用域下的函数,还是需要写:$scope.fun
watchCallback :
接受一个函数或者表达式,当watchObj发生变化是会被调用或执行.
如果是函数形式,它会收到三个参数:
watchCallback (newValue,oldValue,scope)
newValue: watchObj的新的值
oldValue: watchObj的旧的值
scope: 就是当前控制器的$scope
注意:函数或者表达式不是在$scope作用域下执行的,所以,如果是需要调用当前作用域下的某个函数,应该$scope.watchCallback
ifDeep:
一个布尔值
如果 watchObj 的类型是对象或者数组的时候, ifDeep值设置为true, 那么angular会检测被监控对象的每个属性是否发生了变化,而不只是检测一个简单的值.
最后,$(watch)会返回一个函数,这个函数可以用来销毁该控制器,只需要被调用一次即可:
var destroy = $scope.$watch(...);
destroy()
下面看个最基本的例子:
<!DOCTYPE html><html ng-app><head> <title>11.1$watch监控数据变化</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="script.js"></script> <style type="text/css"> *{ font-family:'MICROSOFT YAHEI'; font-size:12px } </style></head><body><div ng-controller = "Watch"> <input type="text" ng-model="number"/> <span>{{result}}</span></div></body></html>
function Watch ($scope){ $scope.number = 0; $scope.count = function(newValue,oldValue,scope){ $scope.result = $scope.number*3; console.log(newValue); console.log(oldValue); console.log(scope); return $scope.result }; $scope.$watch('number',$scope.count,false)}
我们监测了number这个数据,当number发生变化时,即调用count这个函数,改变result的值.
其中,count中的三个参数分别接受了number的新值,旧值,以及当前控制器的$scope:
比如我在文本域中输入3:
------------------------------------------------------------------------------------------------------------------------------------
遗留问题:
在$watch的第一个参数中传入一个函数时,即使该函数并没有返回值,一样可以被监测.so,不明白它究竟是在监测什么东西的变化.
例子可以参考下一篇笔记http://www.cnblogs.com/liulangmao/p/3723385.html
- AngualrJS(十四)$watch 1
- AngualrJS(十四)$watch 2
- angualrJS 的坑们(1)
- xenstore watch机制(1)
- AngualrJS(八)控制视图显示隐藏
- AngualrJS(十三)改变$scope的值
- AngualrJS的学习记录(二)
- Apple Watch Kit(1)- 开发一瞥
- Apple watch 开发指南(1) 预览
- AngualrJs 最新 文件图片上传教程1:Client-View
- AngualrJS(四)input元素的ng-model属性
- AngualrJS(九)css类和样式2
- AngualrJS(九)css类和样式3
- AngualrJS的学习记录(三)一一AngularJS指令小结
- AngualrJs路由
- 表单angualrjs
- (二十四)优秀员工 - 1
- watch
- HDU 2544-最短路(SPFA,Dijkstra,Floyd)
- 印度正在成为阿里、腾讯们逐鹿的新战场
- Dynamic Web Project 的学习笔记
- 实时灯光屏幕渐变
- opencv中的画图函数转载学习
- AngualrJS(十四)$watch 1
- 解决在VC++6.0中遇到GetPrivateProfileIntA读值错误的问题
- Fibonacci sequence两种实现算法及其复杂度分析
- 正则表达式入门_多字符匹配
- EL表达式和JSTL标签库使用
- N3D
- java算法-冒泡排序
- C++拷贝构造函数详解
- 1668: 高桥和低桥