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 Event学习第九章 鼠标事件
Feb 08 Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
基于jquery &amp; json的省市区联动代码
Jun 26 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
微信公众号H5支付接口调用方法
Jan 10 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 Javascript
深入浅析React中diff算法
May 19 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
Zend 输出产生XML解析错误
2009/03/03 PHP
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
javascript中的array数组使用技巧
2010/01/31 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
7个JS基础知识总结
2014/03/05 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
python实现ip查询示例
2014/03/26 Python
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
毕业自荐书
2013/12/09 职场文书
文科教师毕业的自我评价
2014/01/16 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
公司辞职信模板
2015/05/13 职场文书