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

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

angularwatchdigestapply绑定 
阅读更多
$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的不同就是，监听的宿主对象不同
分享到：
| 编译Angular.js
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    在AngularJS中，$apply，$digest和$watch是核心的脏检查机制，它们共同确保了模型和视图之间的同步。下面将详细解释这三个概念及其工作原理。 1. **$apply (通知)** `$apply`是AngularJS提供的一个方法，它的主要...

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

    总结起来，$watch用于监听模型变化，$apply用于将外部变化同步到AngularJS世界，而$digest则是AngularJS用来检测和更新模型的内部循环。这三者协同工作，确保了AngularJS中的数据双向绑定功能得以顺畅运行。在实际...

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

    AngularJS通过几个核心的机制：$watch、$apply、$digest来实现双向数据绑定。 首先，$watch机制是AngularJS数据绑定的核心组件之一。当我们将一个表达式绑定到视图时，AngularJS会将这个表达式放入到一个内部的$...

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

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

    AngularJs $parse、$eval和$observe、$watch详解

    $watch能够监听作用域上的属性名或表达式的值的变化，并在每次作用域的$digest循环中调用对应的函数。$watch的第三个参数用于设置对象比较的方式，默认为引用比较。 例如： ```javascript scope.$watch('book.name'...

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

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

    angularJS中$apply()方法详解

    在这个过程中，如果在$apply()执行的函数中有异常抛出，AngularJS会捕获这些异常，并抛出一个$digest exception错误，这有助于开发者定位到问题所在。 值得一提的是，频繁使用$apply()可能会对性能产生负面影响，...

    AngularJS入门教程之数据绑定原理详解

    在作用域的watch列表中的每一个$watch都会在$digest循环中被检查一次。如果检测到监视的对象发生了变化，就会执行相应的回调函数。在视图上使用ng-model进行双向绑定时，$watch会在幕后自动创建，用于监控模型和视图...

    Angular中的$watch、$watchGroup、$watchCollection

    `$digest`遍历所有`$watch`并检查模型的变化，而`$apply`则通常用于将外部JavaScript代码（如jQuery事件处理程序）中的模型变化应用到Angular世界。在同一个`$digest`循环中调用`$apply`会导致错误，因为它们不能...

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

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

    AngularJS 的$timeout服务示例代码

    2. 当你使用$timeout服务时，你应该避免使用window.setTimeout或window.setInterval，因为这些原生JavaScript定时器不会参与到AngularJS的Digest Cycle中，可能会导致作用域问题。 3. $timeout函数接受一个函数作为...

    浅谈关于angularJs中使用$.ajax的注意点

    需要注意的是，$scope.$apply()会在当前作用域及其子作用域上运行$digest循环，如果在已运行的$digest循环中再次调用，会导致“$apply already in progress”错误。因此，确保$.ajax的回调在$digest安全的环境中执行...

    AngularJS中$interval的用法详解

    `$interval` 服务使得开发者能够在AngularJS的 digest cycle（数据绑定更新循环）中安全地执行定时任务。 在示例代码中，我们看到`$interval` 的基本用法： ```javascript var app = angular.module("app", []); ...

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

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

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

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

    AngularJS的脏检查深入分析

    如果在$digest循环中发现了数据变化，AngularJS会继续执行$digest循环，直到没有更多的变化。这就是所谓的脏检查周期。值得注意的是，$digest循环是“脏检查”的核心。 通过以上描述，我们知道了AngularJS的脏检查...

Magicbox
Global site tag (gtag.js) - Google Analytics