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可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到 ...
随机推荐
- [翻译]CURAND Libaray--Host API--(1)
原文来自:cuda curand toolkit document Translated by xingoo 如果有错误请联系:xinghl90@gmail.com 2Host API简述 使用hos ...
- 3、OpenCV Python 色彩空间
__author__ = "WSX" import cv2 as cv import numpy as np def color_space( img ): gray_img = ...
- [转]Log4j配置详解
来自: http://www.blogjava.net/zJun/archive/2006/06/28/55511.html Log4J的配置文件(Configuration File)就是用来设置记 ...
- P4799 [CEOI2015 Day2]世界冰球锦标赛
\(\color{#0066ff}{题目描述}\) 今年的世界冰球锦标赛在捷克举行.Bobek 已经抵达布拉格,他不是任何团队的粉丝,也没有时间观念.他只是单纯的想去看几场比赛.如果他有足够的钱,他会 ...
- git ignore文件
创建.gitignore文件来设置git要忽略的文件模式: 官方文件列列表:https://github.com/github/gitignore 1. 所有空行或者以 # 开头的行都会被 Git 忽 ...
- Linux(ubuntu)下固定IP的方法
写在前面,问:为什么要固定ip.答:要知道固定IP的好处多多,随意搬动,固定共享地址,不怕断网等等 首先,我们要选取一个局域网内的IP,方法如下: 1.选取IP号段,一般是路由器DCHP以外的IP地址 ...
- Kibana6.x.x——导航权限控制入门
按如下图所示设置: 用该用户登录后,界面如图所示: 但遗憾的是,根据官方论坛的说法,其它的导航隐藏控制,暂时还不支持. 参考:https://discuss.elastic.co/t/hide-ina ...
- C#面试题-递归
有一组数1.1.2.3.5.8.13.21.34...,求第n个数是多少? public int Recursion (int n){ ){ ; } &&n<=){ ; } )+ ...
- 转——.ashx文件与.ashx.cs
作者:PBDragon 原文连接:http://www.cnblogs.com/PBDragon/p/3811831.html 如果项目是“新建网站”,添加的ashx是没有ashx.cs的:如果是新建 ...
- C3算法 和 super
一. Python的继承 多继承 子类继承父类. 继承是为了节省开发时间.提高开发效率 代码得到了重(chong)用 一个类可以拥有多个父类 lass shen_xian: # 定义一个神仙类 de ...