AngularJS中watch监听用法分析

更新时间：2016年11月04日 10:27:53 作者：自由港

这篇文章主要介绍了AngularJS中watch监听用法,较为详细的分析了$watch的具体功能、相关参数用法与使用注意事项,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

AngularJS教程之环境设置
本文主要介绍AngularJS环境设置,学习AngularJS的朋友肯定要设置开发软件的环境,这里详细介绍安装设置流程，有需要的朋友可以参考下
2016-08-08
Angular懒加载模块与Combined Injector原理全面解析
这篇文章主要为大家介绍了Angular懒加载模块与Combined Injector原理全面解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10
利用Angularjs中模块ui-route管理状态的方法
这篇文章主要给大家介绍了如何用Angularjs中的模板ui-route来管理状态的方法,文中通过示例代码介绍的很详细，相信对大家的理解和学习具有一定的参考借鉴价值，有需要的朋友可以一起来学习学习。
2016-12-12
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
今天小编就为大家分享一篇解决angular2在双向数据绑定时[(ngModel)]无法使用的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Angular2-primeNG文件上传模块FileUpload使用详解
这篇文章主要为大家详细介绍了Angular2-primeNG文件上传模块FileUpload使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
AngularJS之页面跳转Route实例代码
本篇文章主要介绍了AngularJS之页面跳转Route ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
这篇文章主要给大家介绍了Angularjs中ng-repeat-start与ng-repeat-end的用法，文章开始先进行了简单的介绍，而后通过完整的实例代码详细给大家介绍这两者的用法，有需要的朋友们可以参考借鉴，下面来一起看看吧。
2016-12-12
详解Angular4中路由Router类的跳转navigate
这篇文章主要介绍了详解Angular4中路由Router类的跳转navigate，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
Angularjs 实现动态添加控件功能
这篇文章主要介绍了Angularjs 实现动态添加控件功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-05-05
深究AngularJS中$sce的使用
本篇文章主要介绍了深究AngularJS中$sce的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06