标签：

angularJS进阶阶段(4)编译器/$compile

编译器$compile是一个AngularJS的内置处事，它卖力遍历DOM树来查找匹配指令， 并挪用指令的实现代码进行措置惩罚惩罚。
HTML编译包孕3个法式：

匹配指令
$compile遍历DOM树，如果发明有元素匹配了某个指令，那么这个指令将被插手 该DOM元素的指令列表中。一个DOM元素可能匹配多个指令。

执行指令的编译函数
当一个DOM元素的所有指令都找齐后，编译器按照指令的优先级/priority指令进行排序。 每个指令的compile函数被依次执行。每个compile执行的功效孕育产生一个link函数，这些 link函数合并成一个复合link函数。

执行生成的链接函数
$compile通过执行指令的link函数，将模板和scope链接起来。功效就是一个DOM视图和scope东西模型 之间的动态数据绑定。

为何将编译和连接两个法式分隔?

简单说，当数据模型的变革会导致DOM布局变革时，指令就需要分袂界说compile()函数和link函数。 例如，ng-repeat指令需要为数据调集中的每个成员复制DOM元素。将编译和链接过程分隔可以有效 地提高性能，因为DOM的复制放在compile()里，仅需要执行一次，但链接则产生在每个生成的DOM元素 上，所以指令的link()函数会执行多次。

指令很少需要compile函数，因为大大都指令考虑的是感化于特定的DOM元素实例，而不是转变DOM 的布局。所以link函数更常用。

指令/directive

笼统地说，指令是DOM元素（例如属性、元素、CSS类等）上的符号符，用来报告AngularJS的HTML编译器 （$compile处事）将特定的行为绑定到DOM元素，或者转变DOM元素。

指令可以安排在元素名、属性、CSS类名称及备注中。下面是一些等效的触发”ng-bind”指令的写法：

1

2

3

4

 

<span ng-bind=http://www.mamicode.com/"exp"></span>

<span class=http://www.mamicode.com/"ng-bind: exp;"></span>

<ng-bind></ng-bind>

<!-- directive: ng-bind exp -->

 

指令的规范化

AngularJS在进行匹配检测之前，首先对HTML元素的标签和属性名转化成规范的驼峰式字符串：
1.去免职称前缀的x-和data-
2.以: , - 或 _ 为支解符，将字符串切分成单词，除第一个单词外，其余单词首字母大写
3.从头拼接各单词
例如，下面的写法都等效地匹配ngBind指令：

1

2

3

4

5

 

<span ng-bind=http://www.mamicode.com/"name"></span> <br/>

<span ng:bind=http://www.mamicode.com/"name"></span> <br/>

<span ng_bind=http://www.mamicode.com/"name"></span> <br/>

<span data-ng-bind=http://www.mamicode.com/"name"></span> <br/>

<span x-ng-bind=http://www.mamicode.com/"name"></span> <br/>

 

所以，在前面的课程中，我们在HTML中使用的ez-duang指令，将被规范为ezDuang， 编译器使用这个规范化的名称与注册的指令进行匹配。

控制器控制器的感化

简单地说，没有控制器/controller，我们没有处所界说业务模型。
<div ng-init="sb={name:'somebody',gender:'male',age:28}">

控制器让我们有机会在scope上界说我们的业务逻辑，具体说，可以使用控制器：
1.对scope东西进行初始化
2.向scope东西添加要领

在模板中声明控制器

在一个HTML元素上使用ng-controller指令，就可以引入一个控制器东西：
<div ng-controller="myController">...</div>

控制器的实现

1

2

3

4

5

6

7

8

9

10

 

//控制器类界说

var myControllerClass = function($scope){

//模型属性界说

$scope.text = "...";

//模型要领界说

$scope.do = (){...};

};

//在模块中注册控制器

angular.module('someModule',[])

controller("myController",myControllerClass);

 
控制器的一次性

控制器结构函数仅在AngularJS对HTML文档进行编译时被执行一次。从这个角度看， 就更容易理解为何将控制器称为对scope东西的增强：一旦控制器创建完毕，就意味着scope对 象上的业务模型结构完毕，从此就不再需要控制器了- scope东西接管了一切。

控制器对scope的影响

ng-controller指令总是创建一个新的scope东西：

在图中，我们看到：
1.ng-app指令引发$rootScope东西的创建。开始时，它是一个空东西。
2.body元素对应的scope东西还是$rootScope。ng-init指令将sb东西挂在了$rootScope上。
3.div元素通过ng-controller指令创建了一个新的scope东西，这个东西的原型是$rootScope。
4.因为原型担任的关系，在do函数中对sb的引用指向$rootScope.sb。

$scope东西初始化$scope东西