Angular技术库
  • 简介
  • 研究热点
    • 单页面登录
    • 单页面服务器渲染
  • 项目实战
    • 目录结构
    • 模块开发流程
    • 公共模块编辑
    • UI使用
    • 工具库
      • util模块
      • filter模块
    • 表单验证
  • 整体框架
    • 环境搭建
      • Windows
      • MAC Linux
    • 示例项目
    • 开发调试
      • 编译JS
      • 编译CSS
      • 编译HTML
      • 编译Bower
      • 服务器启动
      • 与后端服务通讯
    • Gulp文档
      • Gulp API
      • 插件列表
      • Gulp构建
    • Gulp文档
    • 示例项目
  • Angular文档
    • 指令
    • 引导
    • 单页面
    • 基于requireJS和angularJS的前端技术架构
    • 数据共享
    • 模块加载
    • 事件循环
  • SASS文档
    • SASS特性
  • ES6文档
    • ECMAScript前导
    • ECMAScript6特性介绍
    • ES6特性筛选
  • JavaScript文档
    • 匿名函数定义
    • Function
      • 原生prototype
      • 自定义prototype
  • RequireJS
  • Node文档
  • 架构师
  • 时间轴
    • 2016-07-13
    • 2016-06-21
    • 2016-06-14
    • 2016-06-07
    • 2016-05-31
Powered by GitBook
On this page
  • 1.$watch
  • 2.$digest
  • 3.$apply
  • 4.safeApply
  1. Angular文档

事件循环

Angular的数据绑定是Angualr的基础,其实现依赖于3个函数:$watch、$digest、$apply。

1.$watch

  1. 模型监听器,监听数据模型的值变化并执行特定函数。

  2. 每一个数据绑定就注册一个watcher。

$scope.$watch('name', function(newValue, oldValue) {
  if (newValue === oldValue) { return; }
  $scope.updated++;
});

2.$digest

  1. 该方法会触发当前scope以及child scope中的所有watchers。

  2. 因为watcher的listener可能会改变model,所以$digest方法会一直触发watchers直到不再有listener被触发。

3.$apply

apply方法是对digest方法的进一层封装。

/**
 * 更新$scope下的foo变量
 */

//方式一:
$scope.foo = "test";
$scope.$apply();

//方式二
$scope.$apply('foo = "test"');

//方式三
$scope.$apply(function(scope) {
    scope.foo = 'test';
});

4.safeApply

在Angular的digest循环时使用$apply()会抛出异常,解决方法通常为自定义安全更新方法。安全更新方法使用了Angular内部的状态标识位$root.$$phase,该标识位用来标识Angular是否处于$digest更新状态。

$scope.safeApply = function(fn){
   var phase = this.$root.$phase;
   if (phase == '$apply' || phase == '$digest') {
       if (fn && ( typeof (fn) === 'function')) {
          fn();
       }
   } else {
       this.$apply(fn);
   }
}
Previous模块加载NextSASS文档

Last updated 7 years ago