AngularJS中watch监听用法分析


Posted in Javascript onNovember 04, 2016

本文实例讲述了AngularJS中watch监听用法。分享给大家供大家参考,具体如下:

ANGULAR 监听使用:

当angular数据模型发生变化时,我们需要如果需要根据他的变化触发其他的事件。

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

$watch(watchExpression, listener, objectEquality);

watchExpression 需要监控的表达式
listener 处理函数,函数参数如下  function(newValue,oldValue, scope)
objectEquality 是否深度监听,如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="assets/angular.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller('MainCtrl', function($scope) {
  $scope.name = "Angular";
  $scope.updated = -1;
  $scope.$watch('name', function(newValue, oldValue) {
   if (newValue === oldValue) { return; } // AKA first run
   $scope.updated++;
  });
  var i=0;
  $scope.getScope=function(){
   // console.info(this);
   var obj=$("#btnTest");
   i++;
   angular.element( obj).scope().name="hello" +i;
  }
 });
</script>
<body ng-controller="MainCtrl">
 <input ng-model="name" />
 Name updated: {{updated}} times.
 <button id="btnTest" ng-click="getScope()">获取scope</button>
</body>
</html>

此代码监控$scope的name值的变化,如果发生变化则触发监听。

监控对象:

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="assets/angular.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller('MainCtrl', function($scope) {
 $scope.user = { name: "Fox" };
  $scope.updated = -1;
  var watch=$scope.$watch('user', function(newValue, oldValue) {
  if (newValue === oldValue) { return; }
  $scope.updated++;
  $scope.$broadcast('userUpdate', newValue.name);
  });
  //watch();
  var i=0;
  $scope.$on('userUpdate',function(d,data){
   console.info(data);
  })
  $scope.getScope=function(){
   // console.info(this);
   var obj=$("#btnTest");
   i++;
   angular.element( obj).scope().user.name="hello" +i;
  }
 });
</script>
<body ng-controller="MainCtrl">
 <input ng-model="user.name" />
 Name updated: {{updated}} times.
 <button id="btnTest" ng-click="getScope()">获取scope</button>
</body>
</html>

这里我们点击按钮会发现监控并不会触发,原因是我们监控了user对象,这个user对象没哟发生变化,只不过属性值发生了变化。

如果我们希望监控user对象属性发生变化,有两个做法。

1.使用深度监控。

方法如下:

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="assets/angular.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller('MainCtrl', function($scope) {
 $scope.user = { name: "Fox" };
  $scope.updated = -1;
  var watch=$scope.$watch('user', function(newValue, oldValue) {
  if (newValue === oldValue) { return; }
  $scope.updated++;
  $scope.$broadcast('userUpdate', newValue.name);
  },true);
  //watch();
  var i=0;
  $scope.$on('userUpdate',function(d,data){
   console.info(data);
  })
  $scope.getScope=function(){
   // console.info(this);
   var obj=$("#btnTest");
   i++;
   angular.element( obj).scope().user.name="hello" +i;
  }
 });
</script>
<body ng-controller="MainCtrl">
 <input ng-model="user.name" />
 Name updated: {{updated}} times.
 <button id="btnTest" ng-click="getScope()">获取scope</button>
</body>
</html>

设置为深度监控,只要对象发生变化,那么监听就会触发。

2.直接写对象的属性值路径。

var watch=$scope.$watch('user.name', function(newValue, oldValue) {
//具体代码就不全部写了。

消除监听

系统中太多的监听会影响系统的性能,我们可以在满足某些条件后,去掉监听。

去掉监听方法如下:

var watch=$scope.$watch('user', function(newValue, oldValue) {
  if (newValue === oldValue) { return; }
  $scope.updated++;
  $scope.$broadcast('userUpdate', newValue.name);
  },true);
//去掉监听。
watch();

在系统中使用事件广播。

比如在监听时,我们对外广播一个事件,

在控制其中写监听的处理方法:

实例如下:

$scope.$broadcast('userUpdate', newValue.name);

监听代码:

$scope.$on('userUpdate',function(d,data){
 console.info(data);
})

这种做法最好使用在指令中,指令中广播事件,在控制器中实现监听。好处在于实现代码的重用。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
jQuery处理图片加载失败的常用方法
Jun 08 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
AngularJS中的DOM操作用法分析
Nov 04 #Javascript
JS对大量数据进行多重过滤的方法
Nov 04 #Javascript
AngularJS模板加载用法详解
Nov 04 #Javascript
jQuery 遍历map()方法详解
Nov 04 #Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 #Javascript
jQuery图片加载显示loading效果
Nov 04 #Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 #Javascript
You might like
晶体管单管来复再生式收音机
2021/03/02 无线电
function.inc.php超越php
2006/12/09 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
javascript动态加载实现方法一
2012/08/22 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
基本DOM节点操作
2017/01/17 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
python获取指定网页上所有超链接的方法
2015/04/04 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
python skimage 连通性区域检测方法
2018/06/21 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
Django REST framework视图的用法
2019/01/16 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
django实现支付宝支付实例讲解
2019/10/17 Python
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
中国最大的团购网站:聚划算
2016/09/21 全球购物
介绍一下JMS编程步骤
2015/09/22 面试题
财务部经理岗位职责
2014/02/03 职场文书
计划生育证明格式范本
2014/09/12 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
vue实现Toast组件轻提示
2022/04/10 Vue.js