ngRepeat如何优化编译功能？

Question

通过odetocode：

  

The idea behind the compilation step is to allow for one time DOM manipulation before the cloning – a performance optimization. [plunk]

因此......当指令放在ng-repeat块内部时，它被多次实例化，但 compile 函数只执行一次。 ngRepeat如何实现此优化？

Answer 1

AngularJS文档有一个简洁的例子说明你的问题：

Hello {{user}}, you have these actions:
<ul>
    <li ng-repeat="action in user.actions">
        {{action.description}}
    </li>
</ul>

文档说：

  

...模板<li>元素需要克隆并插入到ul中。但克隆<li>元素是不够的。它还需要编译<li>，以使其指令（如{{action.description}}）针对正确的范围进行评估。

这就是ngRepeat的作用：

  

ngRepeat通过阻止编译过程降级到<li>元素来工作，因此它可以复制原始文件并处理插入和删除DOM节点本身。

     

相反，ngRepeat指令分别编译<li>。 <li>元素编译的结果是一个链接函数，它包含<li>元素中包含的所有指令，随时可以附加到<li>元素的特定克隆。

     

在运行时，ngRepeat监视表达式，并且当项目添加到数组中时，它会克隆<li>元素，为克隆的<li>元素创建新范围并调用链接函数在克隆的<li>上。

所以，总结一下：

• ngRepeat元素由ngRepeat本身编译，产生一个包含元素上所有其他指令的链接函数（在本例中为{{1}的插值指令） }）

• 当项目添加到action.description时，元素将被克隆并获得一个新范围，并在其上调用链接函数。

Answer 2

这不是ngRepeat的优化 - 每个Angular指令（内置和自定义）都是相同的。
模板在HTML模板中为指令的每个实例编译一次（但可以多次克隆或链接）。

E.g。在

<ul>
    <li ng-repeat="action in user.actions">...</li>
</ul>

ngRepeat将汇编<li ng-repeat="action in user.actions">...</li>一次，然后多次克隆和链接（action中找到的每user.actions一个）。