有人能简单解释一下吗?
文档看起来有点迟钝。我没有领会到什么时候该用一种而不是另一种的本质和大局。一个对比这两者的例子会很棒。
当前回答
从文档中可以看出:
Compiler Compiler is an angular service which traverses the DOM looking for attributes. The compilation process happens into two phases. Compile: traverse the DOM and collect all of the directives. The result is a linking function. Link: combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. Making the scope model a single source of truth. Some directives such ng-repeat clone DOM elements once for each item in collection. Having a compile and link phase improves performance since the cloned template only needs to be compiled once, and then linked once for each clone instance.
所以至少在某些情况下，这两个阶段作为优化是分开存在的。
从@UmurKontacı:
如果要进行DOM转换，则应该进行compile。如果你想添加一些行为变化的特性，它应该在link中。
其他回答
从文档中可以看出:
Compiler Compiler is an angular service which traverses the DOM looking for attributes. The compilation process happens into two phases. Compile: traverse the DOM and collect all of the directives. The result is a linking function. Link: combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. Making the scope model a single source of truth. Some directives such ng-repeat clone DOM elements once for each item in collection. Having a compile and link phase improves performance since the cloned template only needs to be compiled once, and then linked once for each clone instance.
所以至少在某些情况下，这两个阶段作为优化是分开存在的。
从@UmurKontacı:
如果要进行DOM转换，则应该进行compile。如果你想添加一些行为变化的特性，它应该在link中。
两个阶段:编译和链接
编译:
遍历DOM树寻找指令(元素/属性/类/注释)。指令的每次编译都可以修改它的模板，或者修改它还没有编译的内容。一旦一个指令被匹配，它就返回一个链接函数，这个函数在后面的阶段用于将元素链接在一起。在编译阶段的最后，我们有一个已编译指令及其对应的链接函数列表。
链接:
When an element is linked, the DOM tree is broken at its branch point in the DOM tree, and the contents are replaced by the compiled (and linked) instance of the template. The original displaced content is either discarded, or in the case of transclusion, re-linked back into the template. With transclusion, the two pieces are linked back together (kind of like a chain, with the template piece being in the middle). When the link function is called, the template has already been bound to a scope, and added as a child of the element. The link function is your opportunity to manipulate the DOM further and setup change listeners.
这个问题太老了，我想做一个简短的总结，这可能会有所帮助:
编译为所有指令实例调用一次 编译的主要目的是返回/创建链接(可能是前/后)函数/对象。你也可以init指令实例间共享的东西。 在我看来，“链接”是这个功能的一个令人困惑的名字。我更喜欢“预渲染”。 link为每个指令实例调用，它的目的是准备在DOM中呈现指令。
有点晚了。但是，为了方便将来的读者:
我偶然看到下面这个视频，它以一种非常棒的方式解释了Angular JS中的编译和链接:
https://www.youtube.com/watch?v=bjFqSyddCeA
复制/输入这里的所有内容不太令人愉快。我从视频中截取了几个截图，解释了编译和链接阶段的每个阶段:
第二张截图有点让人困惑。但是，如果我们按照步长编号，就很简单了。
第一个循环:首先在所有指令上执行“Compile”。 第二个循环:执行“Controller”和“Pre-Link”(只是一个接一个) 第三个循环:“Post-Link”以相反的顺序执行(从最里面开始)
下面是代码，它演示了上面的内容:
var app = angular.module('app', []);
app.controller('msg', ['$scope', function($scope){
}]);
app.directive('message', function($interpolate){
return{
compile: function(tElement, tAttributes){
console.log(tAttributes.text + " -In compile..");
return {
pre: function(scope, iElement, iAttributes, controller){
console.log(iAttributes.text + " -In pre..");
},
post: function(scope, iElement, iAttributes, controller){
console.log(iAttributes.text + " -In Post..");
}
}
},
controller: function($scope, $element, $attrs){
console.log($attrs.text + " -In controller..");
},
}
});
<body ng-app="app">
<div ng-controller="msg">
<div message text="first">
<div message text="..second">
<div message text="....third">
</div>
</div>
</div>
</div>
更新:
该视频的第二部分可以在这里找到:https://www.youtube.com/watch?v=1M3LZ1cu7rw，该视频以一个简单的例子解释了如何在Angular JS的编译和链接过程中修改DOM和处理事件。
这是Misko关于指令的演讲。http://youtu.be/WqmeI5fZcho?t=16m23s
Think of the compiler function as the thing that works on a template and the thing that is allowed to change the template itself by, for example, adding a class to it or anything like that. But it's the linking function that actually does the work of binding the two together because the linking function has access to the scope and it's the linking function that executes once for each instantiation of the particular template. So the only kind of things you can placed inside of the compile functions are things that are common across all of the instances.
