`
LiYunpeng
  • 浏览: 936797 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

AngularJS中$watch、$digest、$apply、$observe的作用

阅读更多
$watch、$digest、$apply

$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的不同就是,监听的宿主对象不同
分享到:
评论

相关推荐

    angularjs 中$apply,$digest,$watch详解

    主要介绍了angularjs 中$apply,$digest,$watch详解的相关资料,需要的朋友可以参考下

    AngularJS中的$watch(),$digest()和$apply()区分

    AngularJS $scope里面的$watch(),$digest()和$apply()是AngularJS的核心函数,学习AngularJS必须理解这几个函数。 在绑定$scope中的变量到view的时候,AngularJS自动在内部创建一个”Watch”。”Watch”用于监听...

    AngularJS双向数据绑定原理之$watch、$apply和$digest的应用

    主要介绍了AngularJS双向数据绑定原理之$watch、$apply和$digest的应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    AngularJS报错$apply already in progress的解决方法分析

    如果我们使用了AngularJS中的$scope.$apply()或者$scope.$digest(),我们很可能会遇到类似下面的错误,虽然这个错误没有太大影响,但是在日志中看起来还是很不爽的,日志中记录的异常或者错误,就应该是需要关注和...

    理解$watch ,$apply 和 $digest --- 理解数据绑定过程

    NULL 博文链接:https://bijian1013.iteye.com/blog/2392155

    Bookmarklet-Get-Watch-Count:我计算当前 AngularJS 页面中活动 $watch() 绑定的数量

    每个 $watch() 绑定代表 AngularJS 在每个 $digest 阶段必须执行的处理开销。 通过减少观察者的数量,您可以提高 AngularJS 应用程序的性能。 请从获取书签。 bookmarklet 使用document.querySelectorAll() ,因此...

    浅谈angular.js中实现双向绑定的方法$watch $digest $apply

    Angular.js 中的特性,双向绑定. 多么神奇的功能,让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来...

    Angularjs中的$apply及优化使用详解

    今天,我们要聊得是Angularjs中的小明星$apply。当我们数据更新了,但是view层却没反应时,总能听到有人说,用apply吧,然后,懵懂无知的我们,在赋值代码后面加了$scope.$apply() ,然后就惊喜的发现。噢,真的更新...

    全面解析Angular中$Apply()及$Digest()的区别

    $apply()和$digest()在AngularJS中是两个核心概念,但是有时候它们又让人困惑。而为了了解AngularJS的工作方式,首先需要了解$apply()和$digest()是如何工作的。这篇文章旨在解释$apply()和$digest()是什么,以及在...

    深入理解AngularJs-scope的脏检查(一)

    进入正文前的说明:本文中的示例代码并非AngularJs源码,而是来自书籍<<Build>>, 这本书的作者仅依赖jquery和lodash一步一步构建出AngularJs的各核心模块,对全面理解AngularJs有非常巨大的帮助。若有正在使用...

    ngPerf:Angular 性能提示工具

    $scope.$apply()将从$rootScope传播到所有作用域 $timeout()会调用$rootScope.$apply() ,它很昂贵 介绍 概述 ngPerf基于 AngularJS 中的$decorator ,并在建立昂贵的方法调用时提供控制台日志。 什么是贵? ...

    Angular.js中$apply()和$digest()的深入理解

    相信大家都知道$digest()和$apply()是AngularJS中的两个核心并且有时候容易引人误解的部分。我们需要深入理解这两者是如何运作的,从而才能理解AngularJS本身是如何运作的。本文的目的就是介绍$digest()和$apply()是...

    精通AngularJS part1

    Scope$apply——打开AngularJS世界的钥匙293 深入$digest循环295 整合300 112性能优化——设置期望值、测量、调节、并重复301 113AngularJS应用的性能优化303 优化CPU使用率303 加速$digest循环303 尽可能少...

    angularjs-tips:在AngularJS框架中做事的提示和技巧

    注意:如果您确定自己不在角度范围内,最好在代码后调用$scope.$digest而不是使用$scope.$apply因为$apply将在$rootScope上调用$digest ,这要重得多。 2.从您的控制器检查表格是否脏了或无效。 // `formName` is...

Global site tag (gtag.js) - Google Analytics