angular之 $watch 和$digest 和$apply和$observe的区别
$watch 代表的就是对数据源的监听,当数据源发生变化,就会触发第二个参数的回调函数
$digest 代表触发一个数据源变化的事件
$apply 代表对于$digest的一个封装,他多了一个参数 。
$watch
第一个参数就是要监听的数据源
第二个参数就是当监听的数据源发生变化了,触发的一个回调函数,回调函数包含两个参数,分别代表(新值、旧值)
$digest
是用来手动触发监听事件的,通常不需要手动触发,而是由$apply来调用
$apply
只是把$digest
做了一次封装,来提供手动触发,那么为什么需要手动触发呢,正常情况下,在angular下,修改数据源就会自动触发,但是要是不在angular上下文的情况下,如浏览器DOM事件,setTimeout执行,这种情况下,angular无法获取到事件,所以,通过apply来手动触发一下,在apply的参数中去修改数据源
$observe
他是在定义Directive的时候,针对link的第三个参数attr来做的监听
attr,实际上就是定义的元素上的attribute参数,通过attr可以获取DOM中的参数
通过$observe来进行监听,当参数的值发生变化了,就会触发回调函数,他和watch的不同就是,监听的宿主对象不同
原文链接 https://my.oschina.net/bosscheng/blog/515901
angular之 $watch 和$digest 和$apply和$observe的区别的更多相关文章
- angular核心$watch,$digest,$apply之间的联系
浏览器事件发生时,会在浏览器的上下文window中执行,而angular有自己的上下文angular content,angular 事件在自己的上下文angular content中执行. $wat ...
- 深入了解angularjs中的$digest与$apply方法,从区别聊到使用优化
壹 ❀ 引 如果有人问,在angularjs中修改模型数据为何视图会同步更新呢,我想大多数人一定会回答脏检查(Dirty Checking)相关概念.没错,在angularjs中作用域(scope) ...
- angular的$watch,$digest和$apply
第一部分:$watch $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEqu ...
- $watch、$digest、$apply
$watch.$digest.$apply $watch 代表的就是对数据源的监听,当数据源发生变化,就会触发第二个参数的回调函数 $digest 代表触发一个数据源变化的事件 $apply 代表对于 ...
- angularJS之$watch、$digest和$apply方法
最近项目上使用了比较多的angular JS,一直都对它感觉比较陌生,总觉得有点反直觉,这段时间,准备下定决心弄明白,这个框架到底是怎么一回事,以及它的工作原理,生命周期……一点一点的啃完它吧.首先, ...
- angularjs 中的$digest和$apply区别
$digest和$apply 在Angular中,有$apply和$digest两个函数,我们刚才是通过$digest来让这个数据应用到界面上.但这个时候,也可以不用$digest,而是使用$appl ...
- 瞬间记住Javascript中apply与call的区别
关于Javascript函数的apply与call方法的用法,网上的文章很多,我就不多话了.apply和call的作用很相似,但使用方式有区别 apply与call的第一个参数都是一个对象,这个对象就 ...
- 改变this指针的apply,call,bind的区别
apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. Jav ...
- apply()和call()的区别
这两个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值. apply()接收两个参数:一个参数是在其中运行的作用域,另一个是参数数组(可以是Array实例,也可以是arg ...
随机推荐
- 【我的Android进阶之旅】解决错误:No enum constant com.android.build.gradle.OptionalCompilationStep.FULL_APK
今天在分支编译代码并允许之后,接着同步主干代码之后,再继续点击[Run]按钮允许程序的时候报错了,错误描述日志如下所示: 一.错误描述 Error:(1, 1) A problem occurred ...
- Vue(1)- es6的语法、vue的基本语法、vue应用示例,vue基础语法
一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...
- sql server安装教程(2008 R2,图形界面安装/命令提示符安装即静默安装)
转自:http://blog.51cto.com/jimshu/585023 SQL Server 2008(32/64位)下载地址: 链接:https://pan.baidu.com/s/1eR5b ...
- node.js---sails项目开发(1)
1.安装Node.js和npm---这里就做介绍啦! 2.需要全局下安装Sails sudo npm install sails -g 3. 在本地创建一个文件夹 mkdir ~/lsg/sails ...
- java反射基础知识(五)反射应用实践
详解Java反射各种应用 Java除了给我们提供在编译期得到类的各种信息之外,还通过反射让我们可以在运行期间得到类的各种信息.通过反射获取类的信息,得到类的信息之后,就可以获取以下相关内容: Cl ...
- go——切片
切片(slice)可以看作一种对数组的包装形式,它包装的数组为该切片的底层数组.反过来讲,切片是针对其底层数组中某个连续片段的描述,下面的代码声明了一个切片类型的变量: var ips = []str ...
- 理解display中的box-flex属性
今天有个同学在面试的时候碰到了使用css2和css3实现一种页面布局,要求页面效果如下: 在实现这种页面布局时,他使用了display:box-flex,下面是相应的代码: css2 方式 <! ...
- WPF MVVM TreeView 实现 右键选中 右键菜单
1.非MVVM模式:下载源代码WpfApplication1.zip <TreeView Height="200" PreviewMouseRightButtonDown=& ...
- Deep Learning(深度学习)学习系列
目录: 一.概述 二.背景 三.人脑视觉机理 四.关于特征 4.1.特征表示的粒度 4.2.初级(浅层)特征表示 4.3.结构性特征表示 4.4 ...
- phoenix部署手册-基于hbase
背景描述: phoenix基于hbase的SQL层,映射hbase的表,也可以映射视图(VIEW) 部署安装比较简单 映射表和视图的区别: 映射表: 在Phoenix建表错误不易更改: 删除会连同hb ...