AngularJS之watch

简介

    首先apply方法会触发evel方法,当evel方法解析成功后,会去触发digest方法,digest方法会触发watch方法。

    在digest执行时,如果watch观察的的value与上一次执行时不一样时,就会被触发。

    AngularJS内部的watch实现了页面随model的及时更新。

    $watch方法在用的时候主要是手动的监听一个对象,但对象发生变化时触发某个事件。】

语法

    $watch(watchFn,watchAction,deepWatch)

        watchFn:该参数是一个带有Angular 表达式或者函数的字符串,它会返回被监控的数据模型的当前值。这个表达式将会被执行很多次,所以你要保证它不会产生其他副作用。也就是说,要保证它可以被调用很多次而不会改变状态。基于同样的原因,监控表达式应该很容易被计算出来。如果你使用字符串传递了一个Angular 表达式,那么它将会针对调用它的那个作用域中的对象而执行。

     watchAction(newValue,oldValue,scope):这是一个函数或者表达式,当watchFn 发生变化时会被调用。如果是函数的形式,它将会接收到watchFn 的新旧两个值,以及作用域对象的引用。其函数签名为function(newValue, oldValue, scope)。

        deepWatch:如果设置为true,这个可选的布尔型参数将会命令Angular 去检查被监控对象的每个属性是否发生了变化。如果你想要监控数组中的元素,或者对象上的所有属性,而不只是监控一个简单的值,你就可以使用这个参数。由于Angular 需要遍历数组或者对象,如果集合比较大,那么运算负担就会比较重。

    $watch会返回一个函数,想要注销这个watch可以使用函数.
  var dereg = $scope.$watch('someModel.someProperty', callbackOnChange());dereg();

用法 

    <h3>watch简单数据类型</h3><div ng-controller="ng-watch"><input type="text" ng-model="num"><br/><span ng-bind="'变化前的值-'+preVal"></span><br/><span ng-bind="'变化后的值-'+val"></span><br/><label ng-bind="'变化次数-'+count"></label></div>m1.controller("ng-watch",["$scope",function($sc){$sc.num = 0;$sc.count = 0;$sc.preVal = "";$sc.val = "";$sc.$watch("num",function(newValue,oldValue){if(newValue!==oldValue){$sc.preVal = oldValue;$sc.val = newValue;$sc.count++;}});}]);
    <h3>watch对象</h3><div ng-controller="ng-watch2"><input type="text" ng-model="o.num"><br/><span>{{'变化前的值-'+preObj}}</span><br/><span>{{'变化后的值-'+obj}}</span><br/><label ng-bind="'变化次数-'+count"></label></div>m1.controller("ng-watch2",["$scope",function($sc){$sc.o = {"num": 0};$sc.count = 0;$sc.preObj = "";$sc.obj = "";$sc.$watch('o',function(newValue,oldValue){if(newValue!==oldValue){$sc.preObj = oldValue;$sc.obj = newValue;$sc.count++;}},true);}]);

效果:http://runjs.cn/detail/vnlh0eny


转载于:https://www.cnblogs.com/zhx1991/p/4580868.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/291070.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

真不值!技术大神,却只是阿里P6...

阅读本文大概需要5分钟。昨天在知乎上看到一个程序员发展的好问题&#xff1a;死月是前端领域一个比较知名的IP&#xff0c;之前在大搜车带领整个node团队&#xff0c;出过书写过技术专栏&#xff0c;在业内享有比较高的知名度。认识死月的同学都对他评价非常高&#xff0c;甚至…

linux之如何快速查看电脑内存大小

1、问题 linux之如何快速查看电脑内存大小 2、解决办法 vim /proc/meminfo 3、结果展示

有趣的时间

人的数字造型 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body> <embed width"160" height"70" allowscriptaccess"never…

技术网址收藏

个人博客主页 http://www.mgenware.com/blog/ WPF开发一款软件自动升级组件 http://www.cnblogs.com/hiyz/archive/2012/07/12/2587458.html 限制RICHTEXTBOX的输入的范围 http://www.cnblogs.com/xe2011/p/3780793.html 计时器 http://www.cnblogs.com/xe2011/p/4439700.html …

为什么启动hbase shell后,创建按create 'test', 'cf'失败?

2019独角兽企业重金招聘Python工程师标准>>> 答&#xff1a;是hostname的问题。 sudo gedit /etc/localhosts 将你的主机名改为127.0.0.1 即可。 转载于:https://my.oschina.net/u/923087/blog/290592

mini2440:最简单的嵌入式linux驱动程序模块,mini2440:最简单的嵌入式Linux驱动程序模块 解决找不到mini2440……sample...

原文&#xff1a;http://myswirl.blog.163.com/blog/static/5131864220109143331356/注意&#xff1a;开发Arm平台的驱动&#xff0c;需要Arm平台的源码树&#xff1b;注意&#xff1a;ARM平台的linux内核源码需要先编译&#xff0c;否则无法编译驱动&#xff1b;第一种方式&am…

Android之jni日志如何输出

1、写日志输出帮助文件 先看我之间的例子 http://blog.csdn.net/u011068702/article/details/71375920 Android之JNI动态注册native方法和JNI数据简单使用 然后在jni文件集里面写log_help.h文件,内容如下 // // Created by chenyu on 5/13/17. //#ifndef TEST_LOG_HEL…

机器学习-tensorflow

为什么80%的码农都做不了架构师&#xff1f;>>> 例子1 先从helloworld开始: tubuntu:~$ python Python 2.7.6 (default, Oct 26 2016, 20:30:19) [GCC 4.8.4] on linux2 Type "help", "copyright", "credits" or "license&qu…

C# 多个异步方法的异常处理

、如果调用两个异步方法&#xff0c;每个都会抛出异常&#xff0c;该如何处理呢 ? 在下面的示例中&#xff0c;第一个 ThrowAfter 方法被调用&#xff0c;2s 后抛出异常(含消息 first)。该方法结束后&#xff0c;另一个 ThrowAfter 方法也被调用&#xff0c;1s 后也抛出异常。…

linux解pdf隐写工具,Linux版PDF解密工具PDFDecryptionTool-Deepin-amd64.deb下载

PDF解密工具PDFDecryptionTool的deb安装包提供下载了&#xff0c;可用在Deepin 20.2等Linux发行版中。该工具用于解除PDF文件的所有者权限的密码&#xff0c;解除编辑、复制等限制。另外&#xff0c;PDFDecryptionToolWin.py为Windows版本&#xff0c;针对Windows优化了下UI&am…

Mysql中explain命令查看语句执行概况

Mysql中可以使用explain命令查看查询语句的执行方式&#xff0c;使用方法举例&#xff1a;explain 查询语句 例如&#xff1a;explain select * from user_info 几个重要的字段说明&#xff1a; table&#xff1a;此次查询操作是关联哪张数据表 type&#xff1a;连接查询操作类…

Android之java.lang.UnsatisfiedLinkError(Failed to register native method ***callMethod1())解决办法

1、问题 Failed to register native method com.example.chenyu.test.JniClient.callMethod1() java.lang.UnsatisfiedLinkError: JNI_ERR returned from JNI_OnLoad in "/data/app/com.example.chenyu.test-2/lib/arm/libFirstJni.so" 如下图 2、解决办法 原因:…

代码段编辑器SnippetEditor 2.1

1.选择程序版本 2.可以创建文件夹 3.新建片段 4.给片段取名 5.双击进行编辑 6.点击保存 7.直接使用 转载于:https://www.cnblogs.com/shiworkyue/p/3844993.html

HUAWEI nova 青春版闪速快充,让追剧不再断电

笔者是一个对追剧到极致要求的人&#xff0c;每每有好看的影剧出来&#xff0c;都迫不及待想要一次看个够本。但是事与愿违&#xff0c;手机总是很不争气&#xff0c;虽然电池续航能力不算太差&#xff0c;但是对于我们这种追剧重症患者来说是完全不够的&#xff0c;每次出门还…

飞信linux下载文件,OpenFetion(飞信for Linux)

这是OpenFetion(飞信for Linux)&#xff0c;openfetion是使用GTK 编写的基于libofetion的用户界面。软件功能程序简洁轻快&#xff0c;界面美观&#xff0c;支持libofetion当前提供的所有功能。软件优势它是目前GNU/Linux平台上最优秀的飞信客户端程序&#xff0c;也是基于libo…

免费开源Blazor在线Ico转换工具

1. 功能效果演示 仓库地址&#xff1a;IcoTool[1]在线演示地址&#xff1a;https://tool.dotnet9.com/ico[2]演示下文件上传、转换结果&#xff1a;通过该工具及代码&#xff0c;能了解到&#xff1a;使用Blazor怎么上传文件到服务器(Blazor Server)。怎么从服务器下载文件。如…

Android之error: ‘const struct JNINativeInterface‘ has no member named ‘callVoidMethod‘

1、问题 error: const struct JNINativeInterface has no member named callVoidMethodobj undeclared (first use in this function) 2、原因 JNINativeInterface callVoidMethod函数写错了 obj 函数参数没有定义 3、解决办法 把callVoidMethod函数改成CallVoidMethod函数就…

UIWebView

IOS系统提供了 UIWebView 控件&#xff0c;从而可以方便地集成与网页相关的多种应用&#xff0c;该控件内置浏览器控件&#xff0c;可以用来浏览网页、打开文档等等。 一、UIWebView 可以加载和显示某个URL的网页&#xff0c;也可以显示基于HTML的本地网页或部分网页&#xff1…

数据库设计-基础-1-教务科研申报系统设计UML用例图

根据系统角色能够观察到的系统功能来画出用例图 系统角色划分参考附录 教师角色用例图科研秘书用例图科研处工作人员用例图科研系统管理员用例图校领导用例图附录&#xff1a; 教师&#xff1a;教师可以登录科研系统&#xff0c;查看自己所主持或参加的科研项目&#xff0c;并且…

【02】CC - 有意义的命名

为什么80%的码农都做不了架构师&#xff1f;>>> 1、提防使用不同之处较小的名称 XYZControllerForEfficientHandlingOfStrings 与 XYZControllerForEfficientStorageOfStrings 在IDE下&#xff0c;都有自动补全&#xff0c;这种细微的差别&#xff0c;容易补全错&a…