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。
AngularJS 指令解析(一)的更多相关文章
- AngularJS 指令解析(二)
AngularJS 指令解析(二) 第一篇我们讲过了作用域(scope)这块内容,现在我们进入正题,讲AngularJS的指令. 什么是指令? 这里我们引用官方的一句话: Custom directi ...
- AngularJs指令(一)
AngularJs应用现在越来越流行了,谷歌都与微软合作支持AngularJS2.0,这是要逆天了,说明AngularJs将来大势所趋.最近想跳槽,又重新拾起了AngluarJs(之前由于缺少项目应用 ...
- angularJS 指令二
指令详解1.用directive()方法来定义指令.directive('myDirective',function($timeout,userDefinedService){ return {};} ...
- AngularJS指令进阶 – ngModelController详解
AngularJS指令进阶 – ngModelController详解 在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我 ...
- 不用搭环境的10分钟AngularJS指令简易入门01(含例子)
不用搭环境的10分钟AngularJS指令简易入门01(含例子) `#不用搭环境系列AngularJS教程01,前端新手也可以轻松入坑~阅读本文大概需要10分钟~` AngularJS的指令是一大特色 ...
- AngularJS 指令生命周期 complie link
AnguarJS指令从解析到生效一共会经历Inject.Compile.Controller加载.Pre-link.Post-link这几个主要阶段. 一.AngularJS指令执行过程 1.加载An ...
- AngularJS指令
1. AngularJS指令的特点: AngularJS通过被称为指令的新属性来扩展HTML,指令的前缀为ng-. AngularJS通过内置的指令来为应用添加功能. AngularJS允许你自定义指 ...
- angularjs指令参数transclude
angularjs指令参数transclude transclude翻译为嵌入,和之前看到的vue中的slots作用差不多,目的是将指令元素的子内容嵌入到指令的模板中 定义指令 <div sid ...
- angularjs 指令—— 绑定策略(@、=、&)
angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到 ...
随机推荐
- Linux文件属性用户、组、权限
Linux系统中的用户是分角色的,用户的角色是由UID和GID来识别的(也就是说系统识别的是用户的UID.GID,而非用户用户名),有个UID是唯一的(系统中唯一如同身份证一样)用来标识系统的用户账号 ...
- P1742 最小圆覆盖
\(\color{#0066ff}{题目描述}\) 给出N个点,让你画一个最小的包含所有点的圆. \(\color{#0066ff}{输入格式}\) 先给出点的个数N,2<=N<=1000 ...
- USACO 1.1.1 YOUR RIDE IS HERE
众所周知,在每一个彗星后都有一只UFO.这些UFO时常来收集地球上的忠诚支持者.不幸的是,他们的飞碟每次出行都只能带上一组支持者.因此,他们要用一种聪明的方案让这些小组提前知道谁会被彗星带走.他们为每 ...
- kuangbin专题十六 KMP&&扩展KMP POJ2406 Power Strings
Given two strings a and b we define a*b to be their concatenation. For example, if a = "abc&quo ...
- Dell N5010 Win7下 玩CS全屏(1366*768)问题
在Dell N5010 Win7 下完CS1.6 全屏不了,以下是解决办法 1.按windows+r键打开 运行 窗口,输入regedit,打开注册表 2.依次点开 HKEY_LOCAL_MACHIN ...
- apache 日志分割
Window apache 全局设置日志分割 apache [ httpd.conf ] 配置文件 开启日志模块:LoadModule log_config_module modules/mod ...
- 江西财经大学第一届程序设计竞赛 D
链接:https://www.nowcoder.com/acm/contest/115/D来源:牛客网 题目描述 事情,是这样的. 有这么一天双休日的中午. 我刚把我衣服扔进了洗衣机,然后拿了个小板凳 ...
- PHP的魔术常量
PHP的魔术常量(变量).魔术方法(函数).超全局变量 一.魔术常量(魔术变量) 概念:所谓的魔术常量就是PHP预定义的一些常量,这些常量会随着所在的位置而变化. 1.__LINE__ 获取文件中的 ...
- 用sphinx-doc优雅的写文档
Sphinx 是一个工具,它使得创建一个智能而美丽的文档变得简单.作者Georg Brandl,基于BSD许可证. 起初为写 Python 文档而诞生的 Sphinx,支持为各种语言生成软件开发文档. ...
- C++容器嵌套实现动态二维数组(Vector2D)
转: http://blog.csdn.net/Touch_Dream/article/details/74931891 #include<stdio.h> #include <io ...