【转】angular学习笔记(十四)-$watch(1)
本篇主要介绍$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
from: http://www.cnblogs.com/liulangmao/p/3722885.html
【转】angular学习笔记(十四)-$watch(1)的更多相关文章
- angular学习笔记(十四)-$watch(1)
本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...
- angular学习笔记(十四)-$watch(3)
同样的例子,还可以这样写: <!DOCTYPE html> <html ng-app> <head> <title>11.3$watch监控数据变化&l ...
- angular学习笔记(十四)-$watch(2)
下面来看一个$watch的比较复杂的例子: 还是回到http://www.cnblogs.com/liulangmao/p/3700919.html一开始讲的购物车例子, 给它添加一个计算总价和折扣的 ...
- angular学习笔记(十四)-$watch(4)
如果需要同时监测多个属性或者对象,并且执行的是同样的回调,可以有两种选择: 1. 监测这些属性连接起来之后的值: $scope.$watch('objOne.a+objTwo.b+...', watc ...
- angular学习笔记(十五)-module里的'服务'
本篇介绍angular中的模块:module 在笔记(二)http://www.cnblogs.com/liulangmao/p/3711047.html里已经讲到过模块,这篇主要讲模块的 '服务' ...
- angular学习笔记(十九)-指令修改dom
本篇主要介绍angular使用指令修改DOM: 使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器 ...
- angular学习笔记(十六) -- 过滤器(2)
本篇主要介绍angular自定义的过滤器: 直接看例子: <!DOCTYPE html> <html ng-app="MyFilter"> <head ...
- angular学习笔记(十六) -- 过滤器(1)
本篇主要介绍过滤器的基本用法: 过滤器用来对数据进行格式的转换,数据格式的转化与逻辑无关,因此,我们使用过滤器来进行这些操作: {{... | filter2: 参数1,参数2... }} expre ...
- angular学习笔记(十)-src和href处理
本篇主要介绍angular中图片的src和链接的href的处理: 用到了以下两个属性: ng-src: 绑定了数据的路径表达式 ng-href: 绑定了数据的路径表达式 例如: <!DOCTYP ...
随机推荐
- 最简单去Button回车事件
描述: 有的时候,回车时,不想触发 页面上的保存按钮的事件. 有一种最简单的解决 方法: 一,把form增加一个不用的默认button <form id="form1" ru ...
- Eval 表达式 GridView ItemCommand
<asp:TemplateColumn HeaderText="查看审批数据"> <ItemTemplate> <a onclick=& ...
- EXTJS 4.2 添加滚动条
bodyStyle: 'overflow-x:hidden; overflow-y:scroll',//显示滚动 文章来源:http://www.cnblogs.com/exmyth/archive/ ...
- EXTJS4.2 时间动态刷新显示
function clockGo() { Ext.TaskManager.start({ run: function () { //Ext.getCmp("clock").setT ...
- 用于软件包管理的21个Linux YUM命令
FROM:http://os.51cto.com/art/201309/411895.htm YUM(Yellowdog Updater Modified)是一款开源命令行及图形化软件包管理工具,面向 ...
- Code for the Homework2 改进
1. 实现了到指定点各个关节的转角计算(多解性),并且所求解满足各个关节的最大角和最小角的限制条件. 2. 对方向向量进行了单位化,保证任意大小的向量都行 #include<iostream&g ...
- 防止IFRAME页被嵌套
防止IFRAME页被嵌套 //最大化窗口,防止窗口嵌套 if (parent.location != window.location){ parent.location = window.locati ...
- linux 添加用户
1.下面就开始来说怎么添加新用户 我们以添加一个用户名为jorcen的新用户为例来说明,执行下面的命令: # useradd jorcen 2.那么就新用户就添加完成,但是没有任何信息,新用户添加完成 ...
- Stretch a row if data overflows in jasper reports
My band stretches if necessary with the following conditions, I do not know yours. I have started wi ...
- IDEA 运行maven命令时报错: -Dmaven.multiModuleProjectDirectory system propery is not set
在file-setting里面,找到maven的设置: 先加入一个环境变量 然后配置一个JVM的参数: -Dmaven.multiModuleProjectDirectory=$M2_HOME OK ...