Angular数据绑定机制
关键词:$watch, $digest, $apply, dirty-checking
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事件绑定机制如下图:
Angular数据绑定机制相关推荐
- angular5绑定html,angular数据绑定采用什么机制?
angular数据绑定采用脏检查机制. angular数据绑定机制原理如下: 1.Angular.js扩展浏览器的事件循环 浏览器持续等待例如用户交互这样的事件.当你在一个标签里输入字符之后,这个事件 ...
- AngularJS 作用域与数据绑定机制
AngularJS 简介 AngularJS 是由 Google 发起的一款开源的前端 MVC 脚本框架,既适合做普通 WEB 应用也可以做 SPA(单页面应用,所有的用户操作都在一个页面中完成).与 ...
- 再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结
Angular 的数据绑定采用什么机制,详述原理? 脏检查机制.阐释脏检查机制,必须先了解如下问题. 单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别? ng-bind 单向数据绑 ...
- 五:Angular 数据绑定 (Data Binding)
通常来说,数据绑定要么是从页面流向组件中的数据,要么是从组件中的数据流向页面.下面我们来介绍在Angular 2中数据绑定的几种不同方式. 1. 使用{{}}将组件中的数据显示在html页面上 实 ...
- Angular变化检测机制:改善的脏检查
本文链接:https://blog.csdn.net/fen747042796/article/details/75152336 前端展示的页面是由视图和数据共同构成的,视图模板定义了页面的框架,而数 ...
- Angular数据绑定的学习笔记
https://angular.io/guide/property-binding Property binding in Angular helps you set values for prope ...
- Angular变化检测机制
2019独角兽企业重金招聘Python工程师标准>>> 在使用Angular进行开发中,我们常用到Angular中的绑定--模型到视图的输入绑定.视图到模型的输出绑定以及视图与模型的 ...
- angular数据绑定
数据绑定具体包含 HTML绑定 属性绑定 指令绑定 事件绑定 双向数据绑定 自定义控件 根据ng g component attribute命令创建一个组件attribute; HTML.TS代码如下 ...
- Angular 数据绑定
数据绑定 插值的方式[比较常见],就是把利用(金甲二模板:{{ 插入的内容}})来展现component里面的数据 在bind.component.html页面中 <p>1.我是采用插值的 ...
最新文章
- attribute 'downsample' of type 'NoneType' is not usable in a script method
- javascript高级程序设计之基本概念
- 一个类实现多个接口的demo
- 一天学完spark的Scala基础语法教程十、类和对象(idea版本)
- python主线程执行_Python队列 – 最多运行n个线程
- 虚拟机ping不通百度等外部网络
- 为什么余额宝要不断限制用户购买?
- 把iconfront的资源放cdn访问_详解mpvue小程序中怎么引入iconfont字体图标
- 2021 年 6 个GitHub推荐前端项目
- linux使用命令有什么用,学linux有什么用_Linux初学者学习命令有什么意义
- 数据分析 时间序列分析 ARMA模型
- 安卓开发之WebView的使用
- CVonline: Image Databases
- centos有道linux安装,centos7安装有道词典(不能发音和取词)
- Node 简介、模块、模板引擎、NPM、文件操作、缓冲区、文件流、网络操作、Express框架
- android adb 屏幕分辨率,利用 adb 来修改 Android 安卓的分辨率(另类安卓省电方法)...
- PDF文档一键自动生成目录和书签
- 头戴式耳机的麦克风在哪里
- 中国科学技术大学计算机科学夏令营,中国科学技术大学计算机科学2019年推免夏令营通知...
- 关于PyCharm中python模块无法安装的问题
热门文章
- painter打不开问题的解决
- Capture One Pro 11 Essential Training Capture One Pro 11基本培训 Lynda课程中文字幕
- keep员工哀叹:2点通知,3点谈话,4点走人,vp在线裁人
- La Salle-Pui Ching Programming Challenge 培正喇沙編程挑戰賽 2017
- 解读匿名对象---Java
- axis2数据绑定_Axis2数据绑定
- android java中的Math三角函数sin、cos、tan
- 百度云同盘在计算机显示不出来的,wps网盘图标消失了如何让其显示在“我的电脑”界面中...
- Durbin-Watson 检验
- 计算机科学与技术等级评估,计算机科学与技术学科评估具体排名