AngularJS 指令解析（一）

AngularJS 指令解析（一）

---

前言

笔者AngularJS接触时间差不多是两年多，虽然这两年多AngularJS版本日新月异，但是笔者的版本是比较老的1.4.3，一方面是自己对这个版本比较熟悉，另一方面是老项目需要维护，当然本文笔者也尽可能地写到通俗易懂，毕竟AngularJS在很多设计上也有独到之处，但是人无完人，笔者可能有疏漏的话，烦请提醒留言。下面回归正文，总体而言，AngularJS在设计上有两点比较重要的地方，分别是指令（directive）和作用域（scope）。directive实现了对常用DOM操作的简要封装，而渲染的数据源于scope，而这中间的媒介（或者说是反应的容器、载体）是controller，三者相互作用形成AngularJS的基础设计模式。MVVM框架下就需要双向绑定，而双向绑定的实现是基于脏值检测的digest loop，这也是AngularJS设计比较先进的地方（当然也有缺陷，这个后续再讲）。

本文入门门槛比较高，若对AngularJS刚接触的同学请先看一下官方教程，第一讲重点讲scope，后续讲指令。

AngularJS数据交互示意图：

通常来说AngularJS通过scope来抽象化地实现directive和DOM之间的交流，而scope存在controller上的，因此AngularJS不会过多干涉原生的东西，而是拓展一些新的带$前缀的内部功能属性，比如以一个$符号的前缀，以两个$（$$）符号作为前缀的是AngularJS的私有属性，一般不推荐使用。

scope的作用范围

在AngularJS中，一个scope（作用域）必须与标签元素关联，而标签元素却不一定跟scope关联，它们之间不是充要条件，元素可以通过以下三种方式被指定到一个scope上。

• 通过controller或者directive，scope会被指定在一个标签元素上
• 若标签元素上没有指定，则继承于父标签上的scope
• 反之，则不指定为任何一个scope

第一和第二种情况若接触过AngularJS，则不难理解，第三种情况属于超出AngularJS的执行范围即在ng-app指令范围之外。

digest循环

digest循环是数据双向绑定的关键，也是AngularJS设计上的关键。AngularJS是基于数据绑定特征，通过一个脏值检测循环去追踪数据变化和事件变化，而数据绑定在scope上的，因此scope上肯定有触发这一检测的方法，而这个就是scope.$digest方法，相应的状态表现为$$phase。

• $digest-触发digest循环

• $$phase-digest循环执行状态{null, '$apply', '$digest'}

讲这一过程的之前我们先介绍watcher（监听器）及相关属性

$wathch

• $watch(watchExp, listener,objectEquality)-增加scope监听器

• $watchCollection-监听数据对象或者数组

• $$watchers-保持监听器与scope的关联

数据双向绑定的基础就是$wathch，而数据及时的更新变化却要依赖于$digest循环，当你每次使用ng-bind,ng-model时都会自动创建一个$watch，因此每当数据变化时都会及时更新到界面上，那么问题来了，这个及时的背后依靠的是什么呢？又是什么时候触发$digest呢？

$digest触发时机

digest在AngularJS设计上处于核心的位置，要么被直接触发，要么手动调用$apply触发，而思路上就是service、directive导致直接或者间接地触发了digest，而digest触发了scope上的watcher，watcher更新界面数据，这是设计上最基本的思路。

而这个间接指的是有些AngularJS封装过的函数，比如$timeout服务内置$apply方法。而这个直接是指ngModel或者ngBind值上的变更直接导致watcher触发digest。

转载于:https://www.cnblogs.com/riemann66l/p/9815426.html