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 相关文章推荐
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
javascript+html5+css3自定义提示窗口
Jun 21 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 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
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
jquery cookie的用法总结
2013/11/18 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
js中作用域的实例解析
2017/03/16 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
Python的Flask框架中web表单的教程
2015/04/20 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
python 列表推导式使用详解
2019/08/29 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
Python 自由定制表格的实现示例
2020/03/20 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
应聘销售主管的求职信
2014/04/26 职场文书
公司租房协议书
2014/10/14 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers