angular 数据绑定

1.数据绑定

angular属于MVVM模式,视图更新后自动更新数据模型,数据模型更新后自动更新视图。

2.脏值检测

$watch:检测模型和视图是否同步,若没有同步,它将会使用新值来更新模型数据。即监控变量的变化,若变量值发生变化,执行$watch。

$digest:触发当前作用域和它的子作用域上的$watch。

$apply:触发整个作用域树上的所有$watch。

$watch队列:在模板上绑定一个东西,就会往$watch队列里插入一条$watch。

$digest循环:由两个更小的循环组合起来的,一个处理evalAsync队列,另一个处理$watch队列。$digest会遍历$watch队列(即脏值检测),更新模型的值。一次遍历完$watch队列后,若有$watch更新,重新开始遍历$watch队列,... 直到遍历$watch队列没有更新(如果遍历超过10次,它会抛出一个异常,防止无限循环)循环结束。循环结束后,根据模型的值更新DOM。可以使用$apply方法,触发整个树状作用域的$digest循环。

3.触发脏值检测($apply或$digest)

(1)  自动触发

setTimeout、click事件等。

(2)手动触发

a.调用$apply b.调用$digest

[1]http://www.angularjs.cn/A0a6

时间: 2024-08-23 23:51:25

angular 数据绑定的相关文章

简话Angular 01 初识Angular 数据绑定

1. Angular有哪些突出优点 1) MVC 基于Html-Javascript 2) 依赖注入 3) 数据双向绑定,响应式页面设计 4) 模块化,自定义指令 2. 简话数据绑定 1) 代码: 1 <input type="text" ng-model="hello1"> 2 3 <input type="text" ng-model="hello2"> 4 5 <textarea ng-bi

angular 数据绑定之[]和{{}}的区别

问题描述 在学习angular时,在示例代码写到加载图片时,书中推荐使用单向数据绑定符号[]来绑定图片的路径,然后双花括号的写法是错的. 尝试 首先,按书中推荐的写法: 前端精品教程:百度网盘下载 ? 1 <img [src]="imgUrl" /> 这里就省略了控制器中定义变量的代码. 然后又按书中说错误的方式进行尝试: ? 1 <img src="{{ imgUrl }}" /> 最后的测试结果发现两种写法都可以正常加载图片,并没有出现将

Angular数据绑定调色板

<!DOCTYPE html><html ng-app="myapp"> <head> <meta charset="UTF-8"> <title></title> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <

Angular数据双向绑定

Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 一.什么是数据双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-control

angular、vue使用感受

最近开始学习并使用vue.js,并使用vue+node开发了一个移动端APP来练手,下面想聊聊我对于vue的粗浅看法,并将它和angular进行一些对比: 1.vue是一个轻量.高效的前端组件化框架,学习成本低,可结合vue-router等插件快速开发Web应用,个人认为很适合个人或小团队使用. 2.最近看到阿里的weex框架实际上也采用了"vue+native"的思想,可见vue在大公司也有应用前景. 3.vue是一个MVVM类型的数据驱动的框架,它借鉴了angular数据绑定的思想

vue入门 vue与react和Angular的关系和区别

一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/v2/api/ 二.vue.js是什么 Vue是一个"MVVM框架(库)",和angular类似,相比angular小巧,比较容易上手 Vue是一个构建用户界面点的渐进式框架,与其他重量级框架不同的是,vue采用自底向上增量开发的设计 vue的核心库"只关注视图层",并

[Angular Tutorial] 13 -REST and Custom Services

在这一步中,我们将会改变我们获取数据的方式. ·我们定义一个代表RESTful客户端的自定义服务.使用这个客户端,我们可以用一种更简单的方法向服务端请求数据,而不用处理更底层的$httpAPI,HTTP方法和URLs. 最重要的变化列举如下,您可以点击这里在GitHub上查看全部的不同. 依赖 RESTful功能由Angular的ngResource模块提供,这是从Angular核心模块中独立出来的. 由于我们使用了Bower来安装客户端的依赖,这一步更新bower.json配置文件来添加新的依

angular学习(五)—— Scopes

Scopes简介 Scopes是一个指向application模型的对象,是表达式执行的上下文,模拟application的DOM结构构成自己的层次结构.Scope可以观察表达式和传播事件. Scopes特点 Scopes提供了API $watch观察model的变化. Scopes提供了API $apply通过系统把model的更改从"Angular realm"(controllers, services, Angular event handlers)外部传播到view之中. S

前端资源教程合集

综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 En类资源汇总 免费的编程中文书籍索引 前端书籍 前端免费书籍大全 前端知识体系 免费的编程中文书籍索引 智能社 - 精通JavaScript开发 重新介绍 JavaScript(JS 教程) 麻省理工学院公开课:计算机科学及编程导论 JavaScript中的this陷阱的最全收集--没有之一 JS函数式编程指南 JavaScript Promise迷你书