$watch

监视的作用就是在被监视对象发生变化的时候触发其他的动作,这在某些场景下很有用

$watch 单一的变量

对于普通的变量时,如数字,字符串等,直接如下写是可以监视到变量的变化,并执行相应的函数的。

$scope.count=1;
$scope.$watch('count',function(){
...
});

$watch 多个变量

对于多个变量的监视变化,执行同一函数的话,可以将这几个变量转为字符串,以‘+’号隔开来进行监视

//当count或page变化时,都会执行这个匿名函数
$scope.count=1;
$scope.page=1;
$scope.$watch('count + page',function(){
...
});

$watch对象或数组

发现用上面两种方法去监视数组时,会发现即使数组的内容改变了,也没有触发到这个匿名函数。之后发现watch函数其实是有三个变量的,第一个参数是需要监视的对象,第二个参数是在监视对象发生变化时需要调用的函数,实际上watch还有第三个参数,它在默认情况下是false。
当第三个参数是false时,其实watch函数监视的是数组的地址,而数组的内容的变化不会影响数组地址的变化,所以watch函数失灵了。
解决办法,就是在后面添加第三个参数为true就好(当然,也可以将这监听返回结果为JSON字符串形式的该对象或数组的的匿名函数。)

$scope.items=[
{a:1},
{a:2}
{a:3}];
$scope.$watch('items',function(){...},true);

或者将监听返回结果为JSON字符串形式的该对象或数组的的匿名函数

$scope.items=[
{a:1},
{a:2}
{a:3}];
$scope.$watch(function(){return JSON.stringify($scope.items);
},function(){...});

$watch 函数的返回结果

在写代码的时候,有时会遇到要监视一个函数返回的结果是否变化的情况,所以查了一下$watch 监视函数的情况。

方法1:监视对象为“函数名()”的字符串,记得加“()”!
js //未完成的任务个数 $scope.unDoneCount = function() { var count = 0; angular.forEach($scope.todoList, function(todo) { count += todo.done ? 0 : 1; }); return count; }; //单选影响全选部分 $scope.$watch('unDoneCount()', function(nv) { $scope.isDoneAll = nv ? false : true; });js
方法2:在监视对象中设置为匿名函数,返回要监视的函数的返回值(绕晕了…)

$scope.$watch(function(){return $scope.unDoneCount();//不要忘了(),要执行的啊~
}, function(nv) {$scope.isDoneAll = nv ? false : true;
});

取消$watch

watch的性能消耗好像蛮大的,所以对于已经不需要监视的watch,记得定时取消掉。
至于怎么取消了…查了好久才找到的
其实每个watch函数返回的结果就是这个watch的deregisterWatch()函数

//在chrome的控制台上,断点得到的$watch的返回值
function deregisterWatch() {arrayRemove(array, watcher);lastDirtyWatch = null;
}

所以啊,要取消watch的话,一开始将$watch的返回值保存就好啦,要取消watch的时候,在调用。

var count=1;
var unbingWatch=$scope.$watch('todoList',function(){console.log('todoList change');count++;//相当于在todoList变化了4次之后,就调用unbingWatch()取消这个watch//在第5次todoList改变的时候,就不会输出todoList change了。if(count>4){unbingWatch();}
});

原文:关于angularJS的$watch的 一些小用法

转载于:https://www.cnblogs.com/wancy86/p/7016009.html

angularjs $watch相关推荐

  1. Webix AngularJS

    http://webix.com/widgets/ http://zouyesheng.com/angular.html#toc35 Webix JavaScript UI 库可以帮你构建跨平台的HT ...

  2. [转载]Using ngOptions In AngularJS

    http://odetocode.com/blogs/scott/archive/2013/06/19/using-ngoptions-in-angularjs.aspx?utm_source=tui ...

  3. SegmentFault 技术周刊 Vol.17 - 听说你还没用上 AngularJS

    如何在网页上构建动态应用,通常的解决方案是使用类库和框架,来弥补原生 JS 和 HTML 的不足,实现具体的应用逻辑,如典型的 jQuery.knockout.js 等.而 Google 则直接尝试从 ...

  4. 一款优秀的JavaScript框架—AngularJS

    AngularJS简介 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angular ...

  5. angularjs(1)

    1.angularjs的下载地址为:https://angularjs.org 2.什么是angularsjs????angularjs是对HTML的扩展,吸收了传统的MVC基本原则,将管理数据的模型 ...

  6. 表单验证AngularJs

    参考博客: https://www.cnblogs.com/rohelm/p/4033513.html 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5 ...

  7. [转]调试AngularJS应用

    原文链接:Debugging AngularJS Apps from the Console 当我们开发AngularJS应用的时候,我们想在Chrome/FF/IE控制台调试隐藏在应用中的数据和服务 ...

  8. Angularjs(一)

    1.什么是angular? Angular诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angular ...

  9. Angularjs 开始之Hello world

    为什么这样写 像所有程序的开始一样,使用 angularjs 也从 Hello world 开始 书写 Html 结构 <html> <head><title>学习 ...

最新文章

  1. k中心点聚类算法伪代码_聚类算法之——K-Means、Canopy、Mini Batch K-Means
  2. 大数据将如何重构汽车产业的商业模式?
  3. 使用report PRC_SHOW_PRICING_DOCUMENT查看SAP CRM订单的pricing数据
  4. 极客Web前端开发资源集锦
  5. 【GoWeb开发实战】Beego的路由控制
  6. python报错怎么看_python中的错误如何查看
  7. JavaScript与JSP区别
  8. 显示所有大写字母python_python 输出所有大小写字母的方法
  9. 重读博弈论(八)---海萨尼转换与贝叶斯法则
  10. 一行代码即可删除C盘几十G垃圾,清理c盘垃圾的cmd命令
  11. vue+lodop打印快递面单
  12. 信息差怎么赚钱?这个小众项目完全0门槛
  13. linux清除系统垃圾文件
  14. 【NFC】手机手环模拟门禁卡
  15. Qt 之 QSS(黑色炫酷)
  16. 计算机824难不难,南京理工大学
  17. 业务智能化成为电信运营业的总体发展趋势
  18. C++中继承 —— 继承的概念及定义
  19. Vue CSS 穿透 scoped (>>> || /deep/ )
  20. 计算机系统维护博客,关于Windows系统简单日常维护

热门文章

  1. Android无需权限显示悬浮窗, 兼谈逆向分析app
  2. 【问链-Eos公开课】第5课 组建单机多节点EOS网络
  3. linux nfs时间不对,NFS挂载主机或不稳定的原因与解决方法
  4. maven java archetype_使用Maven Archetype创建Java项目模板
  5. #地形剖面图_高考地理笔记:经纬网、等值线、地形剖面图知识汇总
  6. 从存储区提供程序的数据读取器中进行读取时出错_三菱伺服控制程序写法破析...
  7. telnet 22正常 ssh无法连接_Telnet咋就不安全了呢?带你来看用户名和密码
  8. 一个Email保护的小工具
  9. 观光旅游(Floyd)
  10. php 调用变量方法名,php中引用(变量和函数名前加符号)用法