AngularJS : ng-repeat's compile and link functions

标签 angularjs angularjs-directive angularjs-ng-repeat

我试图了解编译和链接功能之间的区别。在 the compiler 的 Angular 文档中它说

Some directives such as ng-repeat clone DOM elements once for each item in a 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.



我看了source code尝试了解这是如何工作的,但我不明白它是如何为每个克隆实例创建单独的链接函数的。在我看来,compile 函数为 ng-repeat 指令返回了一个链接函数。这个链接函数确实为 ng-repeat 中的每个元素创建了一个新的作用域,但没有给每个克隆的实例一个单独的链接函数。

最佳答案

他们的描述可能会令人困惑的一件事是他们试图在 <ng-repeat> 中讨论指令的想法。而不是讨论 <ng-repeat>本身。

这个想法是,即使你有一个特定指令的多个实例(例如因为它们在 <ng-repeat> 内),编译函数在你的应用程序的生命周期内只执行一次并且只执行一次。因此,将代码放在此处的性能优势是它只运行一次。这也是潜在的问题。编译函数中唯一应该包含的内容是该指令的所有实例化所共有的内容。

另一方面,对于该指令的每个实例化(再次,例如,在 <ng-repeat> 内),链接函数执行一次。

因此,您可以将 compile 函数视为设置该类型指令的模板,而 link 函数设置该指令的实际实例。这就是为什么链接函数会传入一个 $scope 而编译器没有,以及为什么链接函数是更常用的函数。

有关 Angular 的作者之一对此的详细讨论,请查看:http://www.youtube.com/watch?v=WqmeI5fZcho&list=TLwY_LmqLDXW_3QKhTNm1zKa9j40TvPO2O (13:42 是 Misko 地址链接 vs 编译函数的地方)

关于AngularJS : ng-repeat's compile and link functions,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19470138/

相关文章:

css - 无法在 md-tabs 中将 md-button 置于前台

javascript - Angular ui 路由器单元测试(状态到 url)

javascript - 如何动态加载和编译指令?

Angularjs typeahead 示例总是不起作用

javascript - 禁用 ng repeat 中的按钮

angularjs - 当一个复选框被选中时,所有复选框都会被选中(应该只是被选中的那个)——使用 angular js 生成的输入

angularjs - 用 grunt 缩小 angularjs 项目

Javascript 范围 - 无法访问范围之外的值

javascript - 指令内的随机 ng-show

javascript - 带有数据属性的 Angular 'ng-repeat' 函数的纯 javascript/jquery 解决方案?