前言

由于工作的原因,使用angular1.x版本已经有一段时间了,虽然angualr2升级后就完全重构了,但每个版本存在也有一定的道理。话不多说,进入正题。

1.双向绑定的原理是什么?

AngualrJS的双向绑定基于脏检查机制,$scope上有一个监听队列,每当向视图上绑定一个值,就会向watch list中插入一个watch,当遇到可以被Angular context处理的事件,就会触发$digest循环,遍历所有的watch,更新DOM。

2.什么操作会触发$digest循环?

UI发生变化,ajax请求,ng-click,$timeout...

3.如果一个watch中又包含一个watch,该watch中对应的scope model发生了变化,这种情况是怎么处理的呢?

$digest循环并不是只运行一次的,一旦angualar运行整个$watch列表,如果任何值发生改变,应用程序将回退到$watch循环,直到它检测到没有任何更改。

4.如上所述,如果有值发生变化就回退到watch循环,这样会造成死循环吗?

不会,如果循环运行超过十次,angular会抛出异常,应用程序就会死掉。

5.如下代码,ng-click事件什么都没有做,会有脏检查吗?

<button ng-click="">click</button>

会。

6.隐藏的元素,会检查绑定在它上面的表达式吗?

会。

7.重复的表达式会重复检查吗?

会。
关于以上三个问题的总结,一个绑定表达式只要放在当前 DOM 树里就会被监视,不管它是否可见,不管它是否被放在另一个 Tab 里,更不管它是否与用户操作相关。

8.$apply与$digest的区别

$apply会从rootScope上调用$digest

9.什么情况下手动调用$apply?

大致想到两种场景

  • 自定义指令,绑定到$scope上的数据,更新DOM
  • setTimeout的回调函数中涉及对$scope上的数据进行操作,要更新对应的视图。(将setTimeout改成$timeout的话,就不用手动调用$scope.$apply了)

后记

如有写的不正确的地方,欢迎留言讨论。参考文章The-Digest-Loop-and-apply

另外附上我的掘金地址https://juejin.im/user/5c0760bee51d451db767bd04,以后掘金上也会更新文章啦。

AngularJS1.X版本双向绑定九问的更多相关文章

  1. angularjs1.x版本,父子组件之间的双向绑定

    今天遇到了一个angularjs的坑, ng-repeat和ng-if会改变他所包含的html中绑定变量的作用域. angularjs自定义指令,可以定义四种变量,通过 =,@,&双向绑定,单 ...

  2. 最近老是有兄弟问我,Vue双向绑定的原理,以及简单的原生js写出来实现,我就来一个最简单的双向绑定,原生十行代码让你看懂原理

    废话不多说直接看效果图 代码很好理解,但是在看代码之前需要知道Vue双向绑定的原理其实就是基于Object.defineProperty 实现的双向绑定 官方传送门 这里我们用官方的话来说Object ...

  3. Vue之九数据劫持实现MVVM的数据双向绑定

    vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的. 如果不熟悉defineProperty,猛 ...

  4. Angular数据双向绑定

    Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...

  5. 撸一个vue的双向绑定

    1.前言 说起双向绑定可能大家都会说:Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更 ...

  6. 关于网上大量对Vue双向绑定的错误理解

    对于Vue的双向绑定,现在基本是个前端都听说过,面试官也喜欢问这个问题.但对于Vue双向绑定的原理,掘金.博客园和segmentfault等技术社区充斥着大量的错误文章.这些文章的题目基本样子如下 “ ...

  7. AngularJS1.X版本基础

    AngularJS  知识点: DataBinding Providers Validators Directives  Controllers Modules Expressions Factori ...

  8. 数据的双向绑定 Angular JS

    接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...

  9. Backbone.Events—纯净MVC框架的双向绑定基石

    Backbone.Events-纯净MVC框架的双向绑定基石 为什么Backbone是纯净MVC? 在这个大前端时代,各路MV*框架如雨后春笋搬涌现出来,在infoQ上有一篇 12种JavaScrip ...

随机推荐

  1. Vue中全局导入和按需导入的区别

    export {router} //按需导出 import {router} from './router' //按需导入路由模块 export default //全局导出store模块 store ...

  2. KVM虚拟机CPU绑定性能调优(宿主机上操作)

    获取kvm的pid ps -ef | grep kvm 通过pid找到vcpu在那个物理cpu上,没有绑定固定物理cpu时,执行下面命令可以看出vcpu在不同的物理cpu上切换重复执行 ps -eLo ...

  3. codeforces round 472(DIV2)D Riverside Curio题解(思维题)

    题目传送门:http://codeforces.com/contest/957/problem/D 题意大致是这样的:有一个水池,每天都有一个水位(一个整数).每天都会在这一天的水位上划线(如果这个水 ...

  4. 1105 Spiral Matrix(25 分)

    This time your job is to fill a sequence of N positive integers into a spiral matrix in non-increasi ...

  5. Linux--1 初识

    一.服务器核心知识 1.电脑和电脑的硬件组成 现在的人们几乎无时无刻不在使用着电脑!不管是桌上型电脑(桌机).笔记型电脑(笔电).平板电脑,还是智慧型手机等等,这些东西都算是电脑.虽然接触这么多,但是 ...

  6. myeclipse9.0安装svn插件

    先得保证myeclipse9.0是可以正常使用的吧. 第一步当然是从网上下载SVN插件啦.myeclipse9.0集成的eclipse版本是属于3.x,所以下载eclipse3.x系列的SVN插件. ...

  7. 为什么要问Servlet的初始化时间

    Servlet的init方法到底是在什么时候调用的? j2ee specification和java doc中有以下说明 如果load-on-startup设置为>=0, 部署的时候就会调用.  ...

  8. tcp 三次握手,四次挥手几常见面试题

    TCP报文首部 源端口和目的端口,各占2个字节,分别写入源端口和目的端口: 序号,占4个字节,TCP连接中传送的字节流中的每个字节都按顺序编号.例如,一段报文的序号字段值是 301 ,而携带的数据共有 ...

  9. Spark-2.4.0源码:sparkContext

    在看sparkContext之前,先回顾一下Scala的语法.Scala构造函数分主构造和辅构造函数,辅构造函数是关键字def+this定义的,而类中不在方法体也不在辅构造函数中的代码就是主构造函数, ...

  10. 自定义HashMap的键

    用自定义的类型作为HashMap的key,必须同时重载hashCode()和equals(),才可以实现在HashMap中的查找自定义键. 例如自定义Point类: public class Poin ...