angularJS<$scope里的$watch方法>

最新推荐文章于 2020-01-20 12:35:22 发布
最新推荐文章于 2020-01-20 12:35:22 发布
阅读量1.6k 收藏 2
点赞数
分类专栏： angularJs 文章标签： angularJs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyy_0725/article/details/78712021
版权

angularJS<六、$scope里的$watch方法>

原创 2015年09月14日 08:34:04

                                               angularJS<六、$scope里的$watch方法>

1、$watch的作用

         主要用来监听model，如果model发生变化，则触发某些事情

 

比如我们前面说到的脏数据检查脏数据检查调用$apply方法，调用evel进行数据解析，再调用$digest方法进行检查 ，在$digest执行时候，如果$watch观察到value与上一次执行时不一样时候就会触发进行数据更新；

2、$watch的格式

         $scope. $watch(watchFn,watchAction,deepWatch);

   参数解释：

   watchFn：表示一个，angular表达式或者函数的字符串

   watchAction：watchFn发生变化的时候触发此函数，参数为一个function

deepWatch：可选的布尔值命令，检查被监控的每个属性是否发证变化，只对监听对象时有用，如果第三个参数为true 则被监听对象的每一个属性变更都会触发第二个参数function，如果为false则只检查监听对象的对象引用地址，如果属性变了，但是引用地址没变，不会触发，除非你改为了其他对象；

3、实例

   话不多说，直接上代码：

   先说下实现的功能，我们还是在作用域定义一个数字形变量，变量只允许输入小于100的数字切大于1的数字，如果不在该范围，则把变量的值改为0，此处没对字符串处理，所以请不要输入字符串和负数！

 

Html代码：

<divng-controller="controllerDemo">

         <inputtype="text"value=""ng-model="name">

         <hr>

         输入的值：{{name}}

      </div>

 

Controller.js代码：

var controllerDemo=function($scope){

$scope.name=0;        $scope.$watch("name",function(newValue,oldValue){

         if($scope.name>99||$scope.name<1){

            $scope.name=0;

         }

      });

}

 

测试情况如下：

当输入100以下


当你再输入超过100，则成了

 

可以自己测试一下

 

 

以上方法可以看出只用到了$watch的前两个参数，那么第三个参数怎么使用呢？下面，我们来看一下，当我们$scope作用域里面放的是一个对象user的时候，怎么处理！

 

我们需要对作用域user对象做监听，监听其每一个属性，只要有变更就弹框提示属性变更了，实现方式如下

Html代码：

   <divng-controller="controllerDemo">

         当作用域放入一个对象<br>

         name的model的input：<inputtype="text"value=""ng-model="user.name"><br>

         age的model的input：<inputtype="text"value=""ng-model="user.age">

        

         name的值：{{user.name}}<br>

         age的值:{{user.age}}

      </div>

 

Controller.js代码：

 

var controllerDemo=function($scope){

   $scope.user={

      name:"张三",

      age:20

   }

   $scope.$watch("user.name",function(newValue,oldValue){

      alert("user的name属性改为了"+$scope.user.name);

   });

   $scope.$watch("user.name",function(newValue,oldValue){

      alert("user的age属性变了"+$scope.user.age);

   });

}

测试结果：

 1，修改name


2，修改age的mode

 

假设我们的user有100个属性，那么我们是否就应该写入100个类似的监听方法！太过于复杂

 

这个时候我们就可以用$watch的第三个属性进行控制了，我们修改controller.js的代码如下：

var controllerDemo=function($scope){

   $scope.user={

      name:"张三",

      age:20

   }

   $scope.$watch("user",function(newValue,oldValue){

      alert("user属性变了");

   }，true);

}

 

测试结果，如下：

 



 

具体是哪个属性改变，在后期将做说明；

 


阅读全文
版权声明：本文为博主原创文章，转载请注明出处！！！！！！！！！
  • 本文已收录于以下专栏：

[AngularJS面面观] 12. scope中的watch机制---第三种策略$watchCollection

如果你刚刚入门angular，你或许还在惊叹于angular的双向绑定是多么的方便，你也许在庆幸未来的前端代码中再也不会出现那么多繁琐的DOM操作了。但是，一旦你的应用程序随着业务的复杂而复杂，你...

Angularjs $scope 里面的$apply方法 和 $watch方法

1. Angularjs $scope 里面的$apply 方法$apply 方法作用：Scope 提供$apply 方法传播 Model 的变化$apply 方法使用情景：Angul...

就刚刚，Python圈发生一件大事！

都说人生苦短，要学Python！但刚刚Python圈发生的这件事，你们怎么看？真相在这里...

angularJS的$watch失效问题的解决方案

$watch方法，它可以帮助我们在每个scope中监视其中的变量。$watch 单一的变量对于普通的变量时，如数字，字符串等，直接如下写是可以监视到变量的变化，并执行相应的函数的。$sco...

关于angularJS的$watch的 一些小用法

$watch方法，它可以帮助我们在每个scope中监视其中的变量。$watch 单一的变量对于普通的变量时，如数字，字符串等，直接如下写是可以监视到变量的变化，并执行相应的函数的。$scope.cou...

angularjs $scope.$watch 遇到的问题

angularjs可以使用$scope.watch监听对象的变化$scope.prizeDrawRecordId = prizeDrawRecord.id;$scope.$wa...
  • gptancy
  • gptancy
  • 2016年11月18日 14:26
  • 234

AI 工程师职业指南

我们请来商汤、杜邦、声智、希为、58同城、爱因互动、中科视拓、鲁朗软件等公司 AI 技术一线的专家，请他们从实践的角度来解析 AI 领域各技术岗位的合格工程师都是怎样炼成的。

AngularJS $watch用法

$watch()执行时会先调用一次传入的回调，可以认为是初始化。用法:$scope.name = 'zhangsan'; $scope.count=0;$scope.$watch(...

AngularJS基础——$scope里的$apply方法和$watch方法

$apply()的作用是传播Model的变化；下面用一个定时刷新来示例： Angular基础 {{name}} {{age}} ...
  • bboyjoe
  • bboyjoe
  • 2015年12月30日 12:10
  • 2012

Angularjs $scope 里面的$apply 方法 和 $watch 方法

Angularjs scope里面的scope 里面的apply 方法 和 watch方法学习要点：
  • rui0838
  • rui0838
  • 2016年11月12日 17:31
  • 159

（12）AngularJS 1.X 之$watch和$apply方法

引言watch和apply方法1 watch对象的创建1 apply方法实现双向绑定1.引言      在本篇博客中主要介绍一下AngularJS中的数据双向绑定，我们是否有过这个疑问：为什么我...

AngularJS之$watch方法（监控动作）

1、问题背景     AngularJS中的$watch方法来监听数据变化2、实现源码AngularJS之$watch方法（监控动作）body{font...

[AngularJS面面观] 5. scope中的两个异步方法 - $applyAsync以及$evalAsync

Angular中digest循环的主干是对于watchers的若干次遍历，直到整个scope中的数据”稳定”下来，这部分实现在这篇文章中已经进行了详尽的介绍。相关的一些细节优化也在这篇文章中进行了分析...

[AngularJS面面观] 4. scope中的$apply方法 - Digest Cycle的触发者

本文介绍scope对象中$apply方法的实现。关于$apply和$digest方法，就像是一枚硬币的两面，它们之间的区别和联系，在这篇译文中做出了解答，有兴趣的同学可以看看。当然，本文的重点还是在于...

angularJS学习小结——$apply方法和$watch方法

引言   最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化，当时小编对这个方法不是很了解，所以在网上找了一些资料来学习一下，下面小编就给大家简单介绍一些ang...

Angular中$scope的$watch

Angular中scope的scope的watch$watch的作用apply触发脏检查实际上是通过apply触发脏检查实际上是通过digest，而当digest执行时，如果watch观察的valu...

[angular]服务之2$scope之$watch、$watchGroup、$watchCollection

[angular]服务之2$scope之$watch、$watchGroup、$watchCollection

angularJS自定义指令：scope属性

angularJs自定义指令中的scope属性有3种取值方式：1、默认值false，即：默认直接用父scope，但比较危险2、true，即：继承父scope3、建立一个新的隔离scope，但是仍...

AngularJS自定义指令directive：scope属性

一、介绍：在AngularJS中，除了内置指令如ng-click等，我们还可以自定义指令。自定义指令，是为了扩展DOM元素的功能。代码中，通过指定directive中的restrict属性，来决定这个...

[AngularJS面面观] 10. scope事件机制 - $emit，$broadcast以及事件对象

发布-订阅模式(Publish-Subscribe Pattern)事件的生命周期-注册和注销事件与scope继承树-$emit以及$broadcast事件的停止传播以及阻止默认行为事件在sc...

《AngularJS》——scope的绑定策略

scope这个对象在Angular中非常重要，可以说要想学好AngularJS，熟练使用Scope时基本功，下面介绍一下Scope的几种绑定策略。      1、@：把当前的属性作为字符串传递。你还...

AngularJS学习笔记之directive——scope选项与绑定策略

开门见山地说，scope:{}使指令与外界隔离开来，使其模板(template)处于non-inheriting(无继承)的状态，当然除非你在其中使用了transclude嵌入，这点之后的笔记会再详细...
zyy_0725
关注
专栏目录
v-model --双向数据绑定
qq_45802159的博客
01-03 3276
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
AngularJS中$apply方法和$watch方法用法总结
11-27
当时小编对这个方法不是很了解，所以在网上找了一些资料来学习一下，下面小编就给大家简单介绍一些AngularJS中Scope 提供$apply 方法传播Model 的变化和$watch方法监听module变化。 $apply使用情景 AngularJS 外部的...
angularJS<六、$scope里的$watch方法>
心跳停了HeartBeat的博客
09-14 3514
angularJS 1、$watch的作用          主要用来监听model，如果model发生变化，则触发某些事情   比如我们前面说到的脏数据检查脏数据检查调用$apply方法，调用evel进行数据解析，再调用$digest方法进行检查 ，在$digest执行时候，如果$watch观察到value与上一次执行时不一样时候就会触发进行数据更新； 2、$watch的格式
$scope.$watch
Java技术
11-07 994
参见链接： http://www.angularjs.cn/A0a6 http://yuankeqiang.lofter.com/post/8de51_1454f93
angular-------$scope.$watch用法
Bidding
12-02 1550
$watch()函数，用于监视模型数据的变化。 $watch(参数1,参数2,参数3) 参数1：监视的对象 参数2：监视数据改变执行的函数 参数3：[可选]，布尔值-默认为fasle：不监视对象深层属性，true：监视对象深层属性。 1. 监听单个普通变量 $scope.$watch("name", functio...
Angular中$scope的$watch
qq_30937147的博客
01-25 689
Angular中scope的scope的watch$watch的作用 apply触发脏检查实际上是通过apply触发脏检查实际上是通过digest，而当digest执行时，如果watch观察的value与上次执行的不一样时，就会触发。 $watch可以对Angular的model进行监听，判断model值是否发生改变，可以获取到旧值和新值。 $watch的用法刚刚说了watch可以对一个model进
angularJS 中$scope方法使用指南
10-24
下面将详细说明如何在AngularJS中使用$scope方法。 ### $scope基本概念 在AngularJS中，$scope是每个控制器的子作用域对象，它是一个JavaScript对象，可以持有模型属性和方法。当你在视图中使用双大括号{{}}来绑定...
angularjs 中$apply，$digest，$watch详解
10-21
在AngularJS中，$apply，$digest和$watch是核心的脏检查机制，它们共同确保了模型和视图之间的同步。下面将详细解释这三个概念及其工作原理。 1. **$apply (通知)** `$apply`是AngularJS提供的一个方法，它的主要...
深入解析AngularJS框架中$scope的作用与生命周期
10-22
本文将深入解析$scope的作用与生命周期，并探讨在AngularJS框架中如何利用$scope对象来处理数据绑定以及与控制器的交互。 ### $scope的作用 在AngularJS中，$scope是一个特殊的JavaScript对象，它为当前的控制器...
Angular 事件监听$scope.$watch
weixin_43294560的博客
01-20 1107
监听服务$watch 1、不需要在控制器脚本中注入,直接使用 2、监听任何想要监听的NG变量的值,并在这个值改变的时候调用回调函数 语法:$scope.$watch('想要监听的NG变量(不需要加$scope.)或字符串',回调函数) 代码示例: <html ng-app='app' ng-controller='main' > <head> <meta ...
[AngularJS] $scope.$warchCollection
weixin_33781606的博客
11-13 80
For the $watch in last article, we watch 'user.password', actually it is a string. If you watch 'user', this object and we do something like: function WatchCtrl ($scope) { $scope.$watch('us...
angular $scope.$watch
weixin_34320159的博客
07-26 121
在$scope内置的所有函数中，用得最多的可能就是$watch 函数了。当你的数据模型中某一部分发生变化时，$watch函数可以向你发出通知。 你可以监控单个对象的属性，也可以监控需要经过计算的结果（函数）。 实际上只要能够被当作属性访问到，或者可以当作一个JavaScript函数被计算出来，就可以被$watch 函数监控。 它的函数签名为$watch(watchFn, watchActio...
AngularJs学习笔记(4)--$scope里的$watch方法
weixin_33970449的博客
06-12 611
本文主要接住前文简单介绍一下angular中的$watch方法在前面介绍过$apply方法中提到过脏检查，首先apply方法会触发evel方法，当evel方法解析成功后，会去触发digest方法，digest方法会触发watch方法。(1)$watch简介在digest执行时，如果watch观察的的value与上一次执行时不一样时，就会被触发。AngularJS内部的watc...
angular之scope.$watch
weixin_30847271的博客
07-07 122
　　某“大神”挖了个陨石坑，我于是乎似懂非懂的接手，玩了一个月angular。现在项目告一段落，暂别了繁重的重复性工作，可以开始回顾、认真的折腾下之前犹抱琵琶的angular。 　　angular吸引人的特性之一就是双向绑定，model有变化view自动更新。一说到自动执行，首先浮到脑海的必须是监听和回调函数。angular也确实是这样做的，scope.$watch就是此行为的接口。一如所有的类...
$scope.$watch监听
05-18 387
//angularJS $scope的 $watch 方法监听model改变 //$scope有个 $watch 方法，可以监听指定的model的改变，一旦model改变则触发（执行）传入其中的方法，该方法接收三个参数： //$scope.$watch('要监听的model名'，function(newValue,oldValue){},bool值指示是否监听的是对象)， //其中new...
angular中scope的watch用法
weixin_30902675的博客
03-15 113
版权声明：本文为博主原创文章，未经博主允许不得转载 $watch：监视model变化（主观理解：假设现在有一个输入框，而watch能监视这个输入框的旧值oldValue和新值newValue） 首先，你需要在body标签页下添加HTML代码 什么？【currency:"￥"】 这是什么鬼？不懂请看我博客中的【angular筛选器】那一文，有详细解析，接下来是js代码 实现的效...
关于angularJS的$watch的 一些小用法
热门推荐
u010451286的博客
02-04 4万+
$watch方法，它可以帮助我们在每个scope中监视其中的变量。$watch 单一的变量对于普通的变量时，如数字，字符串等，直接如下写是可以监视到变量的变化，并执行相应的函数的。$scope.count=1; $scope.$watch('count',function(){ ... });$watch 多个变量对于多个变量的监视变化，执行同一函数的话，可以将这几个变量转为字符串，以‘+’号隔开来
$watch How the $apply Runs a $digest
weixin_34329187的博客
08-19 189
作者：junyuecao | 发表于 8-8 13:39 | 最后更新时间：8-9 02:34 原文地址：http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/ 原译文地址：http://junyuecao.ap01.aws.af.cm/arti...
深入理解AngularJS：$scope在MVC架构中的关键角色
$scope提供了一些实用的方法，如$watch()和$apply()。$watch()用于监视指定表达式的值变化，并在变化时执行回调函数，这对于实现数据的实时同步非常关键。而$apply()则是确保在JavaScript异步操作后更新视图，避免脏...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值