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 相关文章推荐
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
jquery五角星评分插件示例分享
Feb 21 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
vuex实现购物车的增加减少移除
Jun 28 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
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
How do I change MySQL timezone?
2008/03/26 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
2016/04/08 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
浅谈js中的bind
2019/03/18 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
python使用matplotlib绘制柱状图教程
2017/02/08 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
python实现简单日志记录库glog的使用
2019/12/13 Python
python 实现汉诺塔游戏
2020/11/28 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
升国旗仪式主持词
2014/03/19 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
创先争优承诺书
2015/01/20 职场文书
家长对孩子的寄语
2015/02/26 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
pandas进行数据输入和输出的方法详解
2022/03/23 Python
vue如何清除浏览器历史栈
2022/05/25 Vue.js