认识AngularJS Directive

LDN0 2014-07-02

指令(directive)是我们用来扩展浏览器能力的技术之一。在DOM编译期间,和html关联着的指令会被检测到,并且被执行。这使得指令可以为DOM指定行为,或者改变它的DOM结构。

1.在html中调用指令

指令遵循驼峰式命名,如ngModel(笔者在angular里试了试,这种不管用)。指令还可以通过使用指定符号转化成链式风格的名称来调用,特定符号包括:":","-","_"。还可以选择给指令加上前缀,比如"x-","data-"来让它符合html的验证规则。下面是可以用的指令名称例子:

ng:mode,ng-model,ng_model,x-ng-model,data-ng-model(这些可以用)。

指令可以作为元素名,属性名,类名,或者注释。下面是一些等效调用myDir指令的例子:

<span my-dir="exp"></span>
<span class="my-dir: exp;"></span>
<my-dir></my-dir>
<!-- directive: my-dir exp -->

 2.字符串替换式

在编译期间,编译器会用$interpolate服务去检查文本中是否嵌入里表达式。这些表达式会被注册为watches(监视器),并且作为$disgest循环中的一部分,它会自动更新。下面是一个例子:

<img src="img/{{username}}.jpg">Hello {{username}}!</img>

 3.编译过程和指令匹配

html的编译分为三个阶段:

1).首先,通过浏览器的标准API,将html转换成DOM对象。这是很重要的一步,因为我们的模板必须可被解析(符合规范)的html。跟大多数模板系统做对比,它们一般是基于字符串的,而angular是基于DOM元素的。

2).对DOM的编译是通过$compile()方法完成的。这个方法会遍历DOM,并对指令进行匹配。如果匹配成功,那么将与对应的DOM一起,加入到指令列表中。一旦所有的指令都被确定里,会按照优先级被排列,并且他们的compile方法会被调用。指令的$compile()函数都能修改DOM结构,并且要负责生成一个链接(link)函数。$compile方法最后返回一个合并起来的链接函数,这些链接函数是每个指令的compile函数返回的链接函数的集合。

3).通过调用上一步所说的链接函数来将模板与作用域链接起来。这会轮流调用每个指令的链接函数,让每一个指令都能对DOM注册监听事件,和建立对作用域的监听。这样最后就形成里作用域的DOM的动态绑定。任何一个作用域的改变都会在DOM上体现出来。

下面用代码说明以上三步:

var $compile = ...; //angular编译器
var scope = ...;
var html = '<div ng-bind='exp'></div>';

// 第1步: 将HTML转换成DOM对象(element)
var template = angular.element(html);

// 第2步: 编译这个 template
var linkFn = $compile(template);

// 第3步: 链接函数将 template和scope.链接起来
linkFn(scope);

相关推荐

编程爱好者联盟 / 0评论 2016-11-22