浅谈Angular.js中使用$watch监听模型变化


Posted in Javascript onJanuary 10, 2017

$watch简单使用

$watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你。

$watch(watchExpression, listener, objectEquality);

每个参数的说明如下:

  • watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。
  • listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:newValue(新值), oldValue(旧值), scope(作用域的引用)
  • objectEquality:是否深度监听,如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

举个栗子:

$scope.name = 'hello';

var watch = $scope.$watch('name',function(newValue,oldValue, scope){

    console.log(newValue);

    console.log(oldValue);

});

$timeout(function(){

    $scope.name = "world";

},1000);

$watch性能问题

太多的$watch将会导致性能问题,$watch如果不再使用,我们最好将其释放掉。

$watch函数返回一个注销监听的函数,如果我们想监控一个属性,然后在稍后注销它,可以使用下面的方式:

var watch = $scope.$watch('someModel.someProperty', callback);

//...

watch();

还有2个和$watch相关的函数:

$watchGroup(watchExpressions, listener);

$watchCollection(obj, listener);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
AngularJS 指令详细介绍
Jul 27 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
js 毫秒转天时分秒的实例
Nov 17 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
Jan 10 #Javascript
js实现背景图自适应窗口大小
Jan 10 #Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 #Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 #Javascript
ajax实现动态下拉框示例
Jan 10 #Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 #Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 #Javascript
You might like
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
JS画线(实例代码)
2013/11/20 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
python中self原理实例分析
2015/04/30 Python
Python实现处理管道的方法
2015/06/04 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
python代码实现图书管理系统
2020/11/30 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
CSMA/CD介质访问控制协议
2015/11/17 面试题
公司薪酬管理制度
2014/01/31 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
还款承诺书范本
2015/01/20 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
浅谈Python数学建模之整数规划
2021/06/23 Python