> For the complete documentation index, see [llms.txt](https://xiaoxiami.gitbook.io/angularjs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://xiaoxiami.gitbook.io/angularjs/zhi_ling/angular_zi_ding_yi_zhi_ling/compile_and-and_linkshu_xing.md).
# compile && link属性
## Angularjs 指令编译三阶段
1. 标准浏览器API转化
将html转化成dom，所以⾃自定义的html标签必须符合html 的格式
2. Angular compile
搜索匹配directive，按照priority排序，并执行directive上 的compile方法
3. Angular link
执行directive上的link方法，进⾏行scope绑定及事件绑定
## 为什么编译的过程要分成compile和link?
简单的说就是为了解决性能问题，特别是那种model变化会影响dom结构变化的，而变化的结构还会有新的scope绑定及事件绑定，比如ng-repeat。
## compile和link的使用时机
* compile
想在dom渲染前对它进行变形，并且不需要scope参数想在所有相同directive里共享某些方法，这时应该定义在compile里，性能会比较好返回值就是link的function，这时就是共同使用的时候
* link
对特定的元素注册事件需要用到scope参数来实现dom元素的一些行为
## compile
* complie:function(tElement,tAttrs,transclude)
* complie函数用来对模版自身进行转换，仅仅在编译阶段运行一次
* complie中直接返回的函数是postLink，表示link参数需要执⾏行的函数，也可以返回一个对象⾥里⾯面包含preLink和postLink
## link
* link(scope,iElement,iAttrs,controller)
* link参数代表的是complie返回的postLink
* preLink 表示在编译阶段之后，指令连接到子元素之前运行
* postLink 表示会在所有子元素指令都连接之后才运⾏行
* link函数负责在模型和视图之间进行动态关联，对于每个指令的每个实例，link函数都会执行一次
**例子：**
index.html
```markup
```
app/index.js
```javascript
var i = 0;
var myApp = angular.module('myApp', [])
.directive('customTags',function(){
return {
restrict : 'ECAM',
template : '{{user.name}}
',
replace : true,
compile:function(tElement,tAttrs,transclude){
tElement.append(angular.element('{{user.name}}{{user.count}}
'));
// 编译阶段...
console.log('customTags compile 编译阶段...');
return {
// 表示在编译阶段之后，指令连接到子元素之前运行
pre:function preLink(scope,iElement,iAttrs,controller){
console.log('customTags preLink..')
},
// 表示在所有子元素指令都连接之后才运行
post:function postLink(scope,iElement,iAttrs,controller){
iElement.on('click',function(){
scope.$apply(function(){
scope.user.name = 'click after';
scope.user.count = ++i;
// 进行一次 脏检查
});
})
console.log('customTags all child directive link..')
}
}
// 可以直接返回 postLink
// return postLink function(){
// console.log('compile return fun');
//}
},
// 此link表示的就是 postLink
link:function(){
// iElement.on('click',function(){
// scope.$apply(function(){
// scope.user.name = 'click after';
// scope.user.count = ++i;
// // 进行一次 脏检查
// });
// })
}
}
})
.directive('customTags2',function(){
return {
restrict : 'ECAM',
replace : true,
compile:function(){
// 编译阶段...
console.log('customTags2 compile 编译阶段...');
return {
// 表示在编译阶段之后，指令连接到子元素之前运行
pre:function preLink(){
console.log('customTags2 preLink..')
},
// 表示在所有子元素指令都连接之后才运行
post:function postLink(){
console.log('customTags2 all child directive link..')
}
}
}
}
})
.directive('customTags3',function(){
// return postLink;
return function(){
}
})
.controller('firstController', ['$scope', function ($scope) {
$scope.users = [
{
id:10,
name:'张三'
},
{
id:20,
name:'李四'
}
];
}]);
```