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 相关文章推荐
Jquery截取中文字符串的实现代码
Dec 22 Javascript
javascript是怎么继承的介绍
Jan 05 Javascript
javascript scrollTop正解使用方法
Nov 14 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
JS调用某段SQL语句的方法
Oct 20 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
p5.js入门教程和基本形状绘制
Mar 15 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
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
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
jquery 常用操作方法
2010/01/28 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
python实现在windows服务中新建进程的方法
2015/06/30 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
Python实现的knn算法示例
2018/06/14 Python
numpy 声明空数组详解
2019/12/05 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
美国零售商店:Blue&Cream
2017/04/07 全球购物
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
费用会计岗位职责
2014/01/01 职场文书
网络程序员自荐信
2014/01/25 职场文书
建筑总经理岗位职责
2014/02/02 职场文书
争论的故事教学反思
2014/02/06 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
社区禁毒工作方案
2014/06/02 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
免职证明样本
2014/10/23 职场文书
2014年技术员工作总结
2014/11/18 职场文书
中学教代会开幕词
2016/03/04 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书