ANGULAR JS WATCH监听使用

最新推荐文章于 2019-08-27 19:37:32 发布
最新推荐文章于 2019-08-27 19:37:32 发布
阅读量1.1k 收藏
点赞数
分类专栏： Angular

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);
      })

这种做法最好使用在指令中，指令中广播事件，在控制器中实现监听。好处在于实现代码的重用。


http://www.cnblogs.com/yg_zhang/p/4799369.html

SunsCheung
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈Angular.js中使用$watch监听模型变化
10-20
当angular数据模型发生变化时，我们需要如果需要根据他的变化触发其他的事件。本篇文章主要介绍了Angular.js中使用$watch监听模型变化，有兴趣的可以了解一下
AngularJS $watch 监听
u011927449的博客
07-24 248
监听$watch 监听数据变化，有三个参数 $scope.$watch(“监听的属性”,function(new，old){},true); 写true的时候可以监听一个对象里的多个数据变化，不写true的时候只能监听单个对象变化。new是新值，old是旧值。 $scope.data={ price:30, num:1, free:10, resault:this.num*this.price+this.free } $scope.$watch("data",functio
angular $watch
weixin_30512785的博客
09-22 130
$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。 $watch(watchExpression, listener, objectEquality); 每个参数的说明如下： watchExpression：监听的对象，它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。...
$watch--angularJs的监听事件
路迷
04-12 7833
上一篇介绍了angular的一个应用----双向数据绑定，本篇介绍angular的另一个应用---监听事件，该监听功能是angular自带的，也比较实用。监听功能定义在了$scope里，前面说过，$scope就相当于作用域，表示在当前页面有效，当然， 你也可以把理解为一个空间或一个容器，angular的作者往这个容器里定义了很多方法，$watch就是其中之一。 所谓监听，就是指当被监听的对象发生
详解AngularJS中的$watch
wjxbj的博客
08-24 402
一.使用$watch监控数据模型的变化         在scope内置的所有函数中，用得最多的可能就是$watch函数了，当你的数据模型中某一部分发生变化时，$watch函数可以向你发出通知。你可以监控单个对象的属性，也可以监控需要经过计算的结果（函数），实际上只要能够被当作属性访问到，或者可以当作一个JavaScript函数被计算出来，就可以被$watch函数监控。它的函数签名为： $...
关于angular js_$watch监控属性和对象详解
12-10
$Watch：(监听一个model,当一个model每次改变时，都会触发第二个函数) $watch(‘watchFn’,watchAction,deepWatch) watchFn：带有Angular 表达式或者函数的字符串，它会返回被监控的数据模型的当前值。 watchAction...
angular 实时监听input框value值的变化触发函数方法
12-11
后来经过查找资料，利用angular.js的$watch方法解决了。 代码大概如下： $scope.input = {//初始化，避免ng-model绑定取不到值 Tel:'', Pwd:'' } $scope.$watch('input.Tel', function(newValue, oldValue)
angular-viewport-watch:Angular指令在视口外的范围内禁用观察者
04-25
角度视口手表 当元素未在视口中显示时，通过禁用观察者，可以提高的ng-repeat指令对长列表的性能。... 该库引入了一个名为viewport-watch的简单指令，该指令通过禁用当前不在viewport-watch来解决此问题，并确保它们
angular $watch的使用
lzf的博客
06-26 1951
在$apply方法中提到过脏检查，首先apply方法会触发evel方法，当evel方法解析成功后，会去触发digest方法，digest方法会触发watch方法。(1)$watch简介在digest执行时，如果watch观察的的value与上一次执行时不一样时，就会被触发。AngularJS内部的watch实现了页面随model的及时更新。$watch方法在用的时候主要是手动的监听一个对象，但对象...
AngularJS中watch监听用法分析
10-21
主要介绍了AngularJS中watch监听用法,较为详细的分析了$watch的具体功能、相关参数用法与使用注意事项,需要的朋友可以参考下
vue.js watch监听，vue.js 监听watch
05-03
NULL 博文链接：https://fanshuyao.iteye.com/blog/2434813
Angularjs的键盘事件的绑定
12-10
Angularjs的键盘事件的绑定 推荐button 方法一：ng内置指令 <button ng-click="login()" ng-keypress="todoSomething($event)" class="btn btn-success btn-lg" ng-disabled="loginForm.$invalid"> 登录 </button> 说明：在对应的控制器中的$scope上绑定一个todoSomething方法 $scope.todoSomething=function($event){ if($event.keyCode==13){//回车
深究AngularJS——监听模型$watch
wjxbj的博客
09-07 131
一.前言 　　1.$watch是scope内置的函数，它的作用是用来监听数据的变化。  　　2.$watch可监听哪些数据？  　　单个对象的属性  　　需要计算的结果（函数）  　　3. 语法: $scope.$watch(F,M,B);   二.对$watch参数的了解 　　F：要监听的数据（表达式或函数的字符串），主要是监听这些数据改变没有。它会返回被监听数据的当前值。 ...
AngularJS--$watch用法 整理
shi_6_tians的博客
08-27 481
angularJS 双向绑定原理 AngularJS 在scope 上有一个监听队列($$watchers)，只要使用了ng-* 指令或者{{…}}引用了scope上的变量，就会创建对应的监听器($watch)，用于监听数据的变化并更新view。当浏览器接收到可以被 angular context 处理的事件时，$digest 循环就会触发。$digest 会遍历所有的 $watch。从而更新DO...
AngularJS中的$watch监听事件
SanPhantom的博客
10-24 7725
AngularJS中的$watch监听事件 本篇介绍angular的另一个应用—监听事件，该监听功能是angular自带的，也比较实用。监听功能定义在了scope里，前面说过，scope里，前面说过，scope里，前面说过，scope就相当于作用域，表示在当前页面有效，当然， 你也可以把理解为一个空间或一个容器，angular的作者往这个容器里定义了很多方法，$watch就是其中之一。 所谓监听，...
机械设计家用手摇面条机sw18可编辑非常好的设计图纸100%好用.zip
05-01
机械设计家用手摇面条机sw18可编辑非常好的设计图纸100%好用.zip
机械设计托盘库推车sw12可编辑非常好的设计图纸100%好用.zip
05-01
机械设计托盘库推车sw12可编辑非常好的设计图纸100%好用.zip
node-v12.18.4-linux-arm64.tar.xz
最新发布
05-01
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值