AngularJS中$watch方法监听作用域 --- 普通变量监听和对象监听的区别

最新推荐文章于 2021-08-17 14:58:09 发布
最新推荐文章于 2021-08-17 14:58:09 发布
阅读量939 收藏
点赞数
分类专栏： angularJs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23143555/article/details/80212556
版权
《开经偈》
无上甚深微妙法
百千万劫难遭遇
我今见闻得受持

愿解如来真实义


    之前学过ng-model，现在学习$swatch,感觉在概念上区分不开这两者的关系。ng-model用于视图和作用域之间数据的同步，问题是，既然是同步，那么肯定涉及监听，A的变化被B监测到，B也做出改变。但是B的改变是限定死的，即必须和A保持一致。问题是，如果B想做出的改变不是和A保持一致呢？这怎么办？ng-model满足不了需求。所以，$swatch()诞生了。$swatch()和JavaScript中的DOM操作十分相似。


稍显来看一段代码 --- 洗洗尘垢


<html ng-app = "appModule">
    <head>
        <meta charset="utf-8">
        <script type
最低0.47元/天 解锁文章
洛神赋在csdn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AngularJS - Watch 监听对象
weixin_34290000的博客
04-04 78
<body> <div ng-app="myApp"> <div ng-controller="firstController"> <p>价格:<input type="text" ng-model="iphone.money"></p> ...
AngularJS $watch变量监视
hudeyong926的专栏
06-03 174
Angular之$watch方法监视作用域
Efficiency9的博客
07-25 814
在使用angular时，常常对作用域中的属性进行监视，当其发生改变时，作出相应处理，angular为我们提供了watch方法watch方法 watch是对类型的属性进行监视，熟悉js就会知道，js语言中有七种数据类型 number string null undefined boolean object symbol (ES6加入） 以上其中数据类型中，又有基本类型和引用类型的区别（此处不做
AngularJS $watch 监听
u011927449的博客
07-24 265
监听$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
AngularJS基础——$scope里的$apply方法和$watch方法
bboyjoe的博客
12-30 2952
$apply()的作用是传播Model的变化； 下面用一个定时刷新来示例： Angular基础 {{name}} {{age}} var myApp=angular.module('myApp',[]); myApp.controller('firstCtrl',function($scope,$timeo
AngularJS中$apply方法和$watch方法用法总结
10-20
在AngularJS中，$apply和$watch是两个非常重要的概念，它们主要用于数据绑定和变更检测。下面是关于这两个方法的详细说明： ### $apply方法 **功能**： AngularJS的$apply方法用于将非AngularJS环境中的代码变化...
Angularjs全局变量被作用域监听的正确姿势
11-22
总结，AngularJS中全局变量的正确监听姿势包括合理选择监听方式，及时清理不再需要的watch，理解并利用作用域生命周期，以及考虑使用服务和事件系统来更好地管理数据通信。在实际开发中，结合这些知识可以提高应用的...
浅谈Angular.js中使用$watch监听模型变化
11-26
它接收三个参数：`newValue`（新的值）、`oldValue`（旧的值）以及`scope`（当前作用域）。你可以在这个回调函数中处理变化，例如更新视图或执行其他业务逻辑。 3. `objectEquality`：可选参数，默认为`false`。...
vue watch普通监听和深度监听实例详解(数组和对象)
10-18
这里我们将深入探讨 `watch` 的普通监听和深度监听，特别是在处理数组和对象时的区别。 1. **普通监听 (Shallow Watching)** 在 `watch` 对象中，我们通常直接声明要监听的数据属性。例如，如代码所示，我们监听 `...
理解$watch ，$apply 和 $digest --- 理解数据绑定过程
04-30
$watch是AngularJS中的一个服务，用于监听模型的变化。你可以注册一个$watch函数，当模型的某个属性发生变化时，该函数会被调用。例如： ```javascript $scope.$watch('myModel', function(newValue, oldValue) { ...
Angular中使用$watch监听object属性值的变化(详解)
12-29
Angular中的$watch可以监听属性值的变化，然后并做出相应处理。 常见用法： $scope.$watch(person, function(n, o){ //todo something... })   但是对于一个对象中的某个属性值变化时，$watch似乎不管用了。 示例代码： <body> <div ng-controller=mainCtrl> <input id=myText type=text ng-model=person.name/> <h2>{{person}}</h2> <h2>Status: {{status
AngularJS中watch监听用法分析
10-21
主要介绍了AngularJS中watch监听用法,较为详细的分析了$watch的具体功能、相关参数用法与使用注意事项,需要的朋友可以参考下
angularjs中使用$scope.$watch监控对象模型的变化
diejiankuai3444的博客
09-17 120
如果对象模型发生变化时，可以使用$scope.$watch监控变化 <html ng-app="myApp"> <head> <title>angularjs-demo</title> <script type="text/javascript" src="lib/angularjs/angular.min.js" cha...
java 监听器中的变量_java中两种添加监听器的策略
weixin_39734458的博客
02-25 284
/*第一种：将事件的处理委托给其他对象，下面的例子是委托给了MyListener(implements ActionListener)*/import java.applet.Applet;import java.awt.event.*;import java.awt.*;public class ChangeColor extends Applet{//Applet的默认布局为FlowLayou...
angular如何如何监听对象的值和一次性监听多个值
weixin_43777074的博客
03-31 564
监听多个值： $scope.$watch('{a: value1, b:value2}', funtion(newValue, oldValue) { console.log(newValue.a, newValue.b) }) 监听对象属性 $scope.$watch('obj.name', function(newValue, oldValue) { console.log(newValue) })
angular 属性监听
weixin_41897680的博客
05-23 2834
属性监听 在vue中经常使用watch来监听组件中属性的变化，特别是在使用elementui中的弹窗组件时。 在angular中没有watch，但是可以通过使用生命周期函数ngOnChanges来实现属性的监听 实例 //组件 <app-test [username]="'hhhh'" [age]="12"></app-test> //组件内部ts @Input() username: string = ''; @Input() age: number = 0; //构造器，修
Vue $watch监听对象属性，数组内对象属性改变
陈新科的博客
08-17 1万+
目录 我刚开始对数组里的对象属性监听 监听一个对象及属性 同样也可以设置计算属性computed来监听 首次加载不调用监听函数 我刚开始对数组里的对象属性监听 以下对象里的newValue是改变后的新值，oldValue是改变之前的旧值 watch:{ 'listMenu[4].value':{ handler(newValue, oldValue) { 　　　　　　console.log(newValue) 　　　　} } 直接报错Watcher only acce.
watch监听一个对象中的属性 - Vue篇
热门推荐
阿莹yes的博客
10-28 3万+
目录1.监听一个对象2.监听对象内的某个属性3.回顾一下watch的使用 vue中提供了watch方法，可以监听data内的某些数据的变动，触发相应的方法。 例: data() { return { search: { name: '', code: '', timePicker:[] } } } 1.监听一个对象 监听search watch: { search: { handler(newVal, oldVal) { //todo
Angular中使用$watch监听object属性值的变化
justforuse的博客
08-18 1万+
Angular中的$watch可以监听属性值的变化，然后并做出相应处理。 常见用法：$scope.$watch("person", function(n, o){ //todo something... })但是对于一个对象中的某个属性值变化时，$watch似乎不管用了。 示例代码：<body> <div ng-controller="mainCtrl"> <in
angularjs 1.6.9 $watch
最新发布
05-26
在 AngularJS 1.6.9 中，$watch 是一个作用域方法，用于监视模型的变化。它的语法如下： ``` $watch(watchExpression, listener, [objectEquality]); ``` 其中，watchExpression 是一个字符串或者一个函数，它指定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值