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获取textarea中的光标位置
May 06 Javascript
jQuery Ajax文件上传(php)
Jun 16 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
js字符串转成JSON
Nov 07 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 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
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
JSON格式化输出
2014/11/10 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
python不同系统中打开方法
2020/06/23 Python
python 实现端口扫描工具
2020/12/18 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
综合内勤岗位职责
2014/04/14 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP