重复的编译和链接功能
我试图理解编译和链接函数的区别。 它说在编译器的角度文档中
一些指令如ng-为集合中的每个项目重复一次克隆DOM元素。 编译和链接阶段提高了性能,因为克隆模板只需编译一次,然后为每个克隆实例链接一次。
我查看了源代码,试图理解它是如何工作的,而我不知道它如何为每个克隆实例创建单独的链接函数。 对我来说,它看起来像编译函数返回一个ng-repeat指令的链接函数。 这个链接函数确实为ng-repeat中的每个元素创建了一个新的作用域,但是并没有给每个克隆实例一个单独的链接函数。
有一件事可以让他们的描述感到困惑,他们试图在<ng-repeat>
中讨论指令的概念,而不是讨论<ng-repeat>
本身。
这个想法是,即使你有一个特定指令的多个实例(例如因为它们在一个<ng-repeat>
),编译函数在你的应用程序的整个生命周期中只执行一次。 因此,将代码放在这里的性能好处是它只能运行一次。 这也是潜在的问题。 编译函数中唯一需要做的事情就是该指令的所有实例都是通用的。
另一方面,链接函数对于该指令的每个实例都会执行一次(例如,在<ng-repeat>
)。
因此,您可以将编译函数看作设置此类型指令的模板,而链接函数设置该指令的实际实例。 这就是为什么链接函数得到一个$范围传递给它,并且编译没有,以及为什么链接函数是更常用的。
有关Angular的一位作者对此的详细讨论,请查看:http://www.youtube.com/watch?v=WqmeI5fZcho&list=TLwY_LmqLDXW_3QKhTNm1zKa9j40TvPO2O(13:42是Misko地址链接与编译功能的区别)
除了KayakDave的回答,这里是一个ng-repeat的简单实现,它不会执行任何收集观察。 这位笨蛋的日志记录显示了事件的顺序,甚至有一些例子显示了优先级如何工作。
Plunker
链接到源问题
使用Javascript:
app.directive('fakeRepeat', function() {
return {
priority: 1000,
terminal: true,
transclude: 'element',
compile: function(el, attr, linker) {
return function(scope, $element, $attr) {
angular.forEach(scope.$eval($attr.fakeRepeat).reverse(), function(x) {
var child = scope.$new();
child[attr.binding] = x;
linker(child, function(clone) {
$element.after(clone);
});
});
}
}
}
});
链接地址: http://www.djcxy.com/p/77915.html