Angular数据绑定机制原理

1.Angular.js扩展浏览器的事件循环

浏览器持续等待例如用户交互这样的事件。当你在一个<input>标签里输入字符之后，这个事件的回调函数在JS解释器中执行了其包含的DOM操作，执行完毕后，浏览器响应地对DOM做出了变化。Angular拓展了这个事件循环，使它有时候成为angular context 的执行环境。

2.$watch list

$watch 可以检测model的变化。每当绑定一个数据到view上的时候，$watch队列就会插入一条对应的$watch。例子如下：

controller.js：

app.controller('MainCtrl', function($scope) {
 $scope.people = [...]; // 假设长度为10
});

index.html:

<ul>
 <li ng-repeat="person in people">
   {{person.name}} - {{person.age}}
 </li>
</ul>

其中ng-repeat 生成了一个1个$watch，每个person生成了2个$watch，总共是（1+2*10），21个$watch。$watch的生成阶段是模板加载完成，也就是linking阶段。（angular分为compile和linking阶段），Angular会寻找每个directive（上面的例子中ng-repeat和{{}}都属于directive），然后生成每个$watch。

3.$digest 循环

当浏览器接收到angular context相关的事件时，$digest循环就会被触发。它由2个小循环组成，1个处理evalAsync 队列，另一个处理$watch队列。$digest进行循环时，将遍历$watch队列，查看是否有数据更新过，这种遍历就叫做dirty-checkin（脏检查），如果脏检查发现有$watch更新，将会触发新的脏检查，直到所有的$watch都没有更新。这样就能保证每个model都不会变化。

脏检查超过10次后会抛出异常防止无限循环。$digest循环结束后DOM会相应地发生变化。其实$digest从字面意义理解就像“消化”的过程一样，逐渐地把所有营养（$watch的变化）都吸收掉。

4.通过$apply 进入 angular context

$apply 决定事件是否进入angular context，使用angualr的自带directive，比如ng-model，更改绑定的数据时，angular会将事件封装到$apply中。比如，ng-model="name"的输入框，输入字符“w”，事件会调用，$apply("name='w';")，完成$scope中的数据更新。

调用第三方库时的数据绑定

当在angular中调用jquery，并不能更新jquery绑定的数据，因为jquery没有调用$apply，事件没有进入angular context，导致$digest没有执行。例子如下：

app.js

 app.directive('clickable', function() {
  return {
   restrict: "E",
   scope: {
    count1: '=',
    count2: '='
   },
   template: '<ul style="background-color: lightblue"><li>{{count1}}</li><li>{{count2}}</li></ul>',
   link: function(scope, element, attrs) {
    element.bind('click', function() {
     scope.count1++;
     scope.count2++;
    });
   }
  }
});
app.controller('MainCtrl', function($scope) {
 $scope.count1= 0;
 $scope.count2= 0;
});

例子中，每次点击该元素，预期count1和count2都会自增1，但实际没有。其实$scope（ViewModel）已经改变，但是没有强制执行$digest。修改click事件如下：

element.bind('click', function() {
 scope.$apply(function() {
   scope.foo++;
   scope.bar++;
 });
})

经过调用$apply实现了预期。

5.总结

angular事件绑定机制如下图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS 双向数据绑定详解简单实例

    AngularJS 双向数据绑定详解简单实例

    angular的双向数据绑定,个人理解是,通过model建立数据模型,那么视图上的数据就会对应存储在angular程序里,视图上的数据变化会同步到model,model的数据改变也会同步到视图. 下面的demo演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello, AngularJS!</titl

  • 详解Angular的双向数据绑定(MV-VM)

    详解Angular的双向数据绑定(MV-VM)

    angular的核心MVVM,下面来看看MV(数据到视图). <div ng-controller="Aaa"> <p>{{name}}</p> </div> <script type="text/javascript"> function Aaa($scope){ $scope.name = 'hello AngularJs'; setTimeout(function(){ $scope.name = '

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

    本文实例讲述了AngularJS数据绑定原理.分享给大家供大家参考,具体如下: 注 这篇文章主要是写给新手的,是给那些刚刚开始接触Angular,并且想了解数据帮定是如何工作的人.如果你已经对Angular比较了解了,那强烈建议你直接去阅读源代码. Angular用户都想知道数据绑定是怎么实现的.你可能会看到各种各样的词汇:$watch,$apply,$digest,dirty-checking...它们是什么?它们是如何工作的呢?这里我想回答这些问题,其实它们在官方的文档里都已经回答了,但是我

  • Angular 2.0+ 的数据绑定的实现示例

    这两天学习了Angular感觉 数据绑定这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 前言 我们使用如下的组件代码进行本文的所有演示 export class AppComponent { angularLogo = 'https://angular.io/assets/images/logos/angular/angular.svg'; userName="David"; newItem() { console.log("Hello world!"

  • Angular2数据绑定详解

    Angular2数据绑定详解

    大致介绍 Angular2中数据绑定的方式默认是以单向方式,数据绑定的方式可以分为: 1.属性绑定和插值表达式 组件类-> 模板 2.事件绑定:模板 -> 组件类 3.双向绑定: 模板 <-> 组件类 事件绑定 事件绑定是把模板中的事件绑定到组件类中的方法上,例如在一个组件中的HTML代码是: <p> <a (click)="doClick($event)">点我</a> </p> (click)表示要进行的操作,

  • angularjs学习笔记之双向数据绑定

    这次我们来详细讲解angular的双向数据绑定. 一.简单的例子 这个例子我们在第一节已经展示过了,要看的移步这里 这里实现的效果就是,在输入框输入内容,下面也会相应的改变对应的内容.这就实现了数据双向绑定. 二.取值表达式与ng-bind的使用 我们再看一个例子,点击这里,文中出现的第一个例子中,{{greeting.text}}和{{text}}就是一个取值表达式了,但是如果你一直刷新页面,你会发现这样一个问题,那就是页面有时候会一瞬间的出现"{{greeting.text}} {{text

  • 详解Angular.js数据绑定时自动转义html标签及内容

    angularJS在进行数据绑定时默认是以字符串的形式数据,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止html标签的注入攻击,但有时候需要,特别是从数据库读取带格式的文本时,无法正常的显示在页面中. 而要对html进行转义,则需要在数据绑定的html标签中使用ng-bind-html属性,该属性依赖与$sanitize,也就是需要引入angular-sanitize.js文件,并在module定义时注入该服务ngSanitize.比如: html: <span ng

  • AngularJS入门教程之数据绑定用法示例

    AngularJS入门教程之数据绑定用法示例

    本文实例讲述了AngularJS数据绑定用法.分享给大家供大家参考,具体如下: 数据绑定是AngularJS中非常重要的特性,我们看一下下面的例子: <!DOCTYPE html> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="angular-1.3.

  • Angular数据绑定机制原理

    Angular数据绑定机制原理

    1.Angular.js扩展浏览器的事件循环 浏览器持续等待例如用户交互这样的事件.当你在一个<input>标签里输入字符之后,这个事件的回调函数在JS解释器中执行了其包含的DOM操作,执行完毕后,浏览器响应地对DOM做出了变化.Angular拓展了这个事件循环,使它有时候成为angular context 的执行环境. 2.$watch list $watch 可以检测model的变化.每当绑定一个数据到view上的时候,$watch队列就会插入一条对应的$watch.例子如下: contr

  • AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】

    AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】

    本文实例讲述了AngularJS框架双向数据绑定机制.分享给大家供大家参考,具体如下: 之前写的一篇<AngularJS入门示例之Hello World详解> ,介绍ng-model的时候提到:使用AngularJS的双向数据绑定机制,不需要我们编写繁琐的代码来实现同样的功能.现在我们看一个比较震撼的例子,看看angularJS是如何减少我们在前端开发中的繁琐劳动的.越是感受到框架功能的强大,越是能够激发学习的兴趣和动力. 假如我们有一个学生信息列表,包含学生的姓名.地址和年龄信息.假如这个数

  • 详解Angular数据绑定及其实现方式

    详解Angular数据绑定及其实现方式

    前言 Web开发需要模型和视图之间的数据同步.这些模型基本上包含数据值,而视图则处理用户看到的内容.因此,如果您想知道这在Angular中是如何发生的,这篇有关Angular数据绑定的文章将为您提供帮助. 下面提到的是此处讨论的主题: What is Data Binding? Types of Data Binding in Angular One-way Data Binding Interpolation Property Binding Event Binding Two-way Dat

  • PHP反射机制原理与用法详解

    本文实例讲述了PHP反射机制原理与用法.分享给大家供大家参考,具体如下: 反射 面向对象编程中对象被赋予了自省的能力,而这个自省的过程就是反射. 反射,直观理解就是根据到达地找到出发地和来源.比如,一个光秃秃的对象,我们可以仅仅通过这个对象就能知道它所属的类.拥有哪些方法. 反射是指在PHP运行状态中,扩展分析PHP程序,导出或提出关于类.方法.属性.参数等的详细信息,包括注释.这种动态获取信息以及动态调用对象方法的功能称为反射API. 如何使用反射API <?php class person{

  • JAVA中实现原生的 socket 通信机制原理

    JAVA中实现原生的 socket 通信机制原理

    本文介绍了JAVA中实现原生的 socket 通信机制原理,分享给大家,具体如下: 当前环境 jdk == 1.8 知识点 socket 的连接处理 IO 输入.输出流的处理 请求数据格式处理 请求模型优化 场景 今天,和大家聊一下 JAVA 中的 socket 通信问题.这里采用最简单的一请求一响应模型为例,假设我们现在需要向 baidu 站点进行通信.我们用 JAVA 原生的 socket 该如何实现. 建立 socket 连接 首先,我们需要建立 socket 连接(核心代码) impor

  • PHP面向对象自动加载机制原理与用法分析

    PHP面向对象自动加载机制原理与用法分析

    本文实例讲述了PHP面向对象自动加载机制原理与用法.分享给大家供大家参考,具体如下: 在学习PHP的面向对象的时候,会知道很多"语法糖",也就是魔术方法.有一个加自动加载的魔术方法,叫:__autoload(); 先看一段代码 <?php function __autoload($classname) { $filename = "./". $classname .".php"; include_once($filename); } new

  • Android6.0 消息机制原理解析

    消息都是存放在一个消息队列中去,而消息循环线程就是围绕这个消息队列进入一个无限循环的,直到线程退出.如果队列中有消息,消息循环线程就会把它取出来,并分发给相应的Handler进行处理:如果队列中没有消息,消息循环线程就会进入空闲等待状态,等待下一个消息的到来.在编写Android应用程序时,当程序执行的任务比较繁重时,为了不阻塞UI主线程而导致ANR的发生,我们通常的做法的创建一个子线程来完成特定的任务.在创建子线程时,有两种选择,一种通过创建Thread对象来创建一个无消息循环的子线程:还有一

  • C++ Assert()断言机制原理以及使用方法

    MSDN原文如是说: Evaluates an expression and, when the result is false, prints a diagnostic message and aborts the program. (判断一个表达式,如果结果为假,输出诊断消息并中止程序.) void assert( int expression ); 参数:Expression (including pointers) that evaluates to nonzero or 0.(表达式[

  • 浅谈Vue数据绑定的原理

    浅谈Vue数据绑定的原理

    本文介绍了Vue数据绑定的原理,分享给大家,具体如下: 原理 其实原理很简单,就是拦截了Object的get/set方法,在对数据进行set (obj.aget=18) 时去重现渲染视图 实现方式有两种 方式1 定义了同名的get/set就相当于定义了age var test = { _age: 18, get age() { console.log('触发get'); //直接会this.age会进入死递归的 return this._age; }, set age(age) { consol

  • Java 反射机制原理与用法详解

    本文实例讲述了Java 反射机制原理与用法.分享给大家供大家参考,具体如下: 反射反射,程序员的快乐! 1.什么是反射? Java反射就是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意方法和属性:并且能改变它的属性.而这也是Java被视为动态(或准动态,为啥要说是准动态,因为一般而言的动态语言定义是程序运行时,允许改变程序结构或变量类型,这种语言称为动态语言.从这个观点看,Perl,Python,Ruby是动态语言,C++,Java,C#不是

随机推荐