AngularJS指令compile和link函数的真相

angularjs太棒了 ，它允许你创建高度语义化和可重用的组建。从某种意义上说，您可以将它们视为web组件的最终先驱。 关于如何写自定义的指令已经出现在很多好的文章和书中了。相反，很骚有涉及到 和 函数的不同，更不要说 与 函数了。 大多数教程都简洁的提及到 函数主要被用在 AngularJS 内部并且建议你只使用 函数这可以覆盖大多数自定义指令使用场景。 因此，跟谁我，在本文的最后，您将确切知道这些功能是什么以及何时应该使用它们。 This article assumes that you already know what an AngularJS directive is. If not, I would highly recommend reading the AngularJS developer guide section on directives first. AngularJS是如何处理指令的 在我们开始之前，让我们先来分解AngularJS如何处理指令。 当浏览器渲染一个页面时，它一定会去阅读HTML标签，创建DOM并且在DOM准备就绪时广播事件。 当你使用 在你的代码页中引入AngulaJS时，AngularJS监听那事件当它一旦收到事件，它开始遍历DOM，查询一个有 属性的标签。 当这个标签被查找到，AngularJS开始使用该特定元素作为起点处理DOM。因此，如果在 元素上设置 属性，AngularJS将开始处理从 元素开始的DOM。 从这时起，AngularJS递归地查询所有的子元素，寻找对应于你的AngularJS应用程序中定义的指令的模式。 AngularJS如何处理元素取决于实际的指令定义对象。你定义了一个 函数，一个 函数或者两者。或者你可以定义一个 函数和一个 函数来代替 函数。 那么，所有这些功能之间有什么区别，以及为什么或什么时候应用它们？ 跟紧我... 代码演示 为了解释差异，我将使用一些希望易于理解的示例代码。 考虑下面的HTML标记： 和一下JS： 目的很简单：使AngularJS处理三个嵌套的指令，每个指令都有自己的 , , 函数去log一行文本保证我们能够辨识它们。 这应该使我们能够首先了解AngularJS处理指令后发生的情况。 输出 以下是控制台中输出的屏幕截图： 自己尝试一下，仅仅打开this plnkr 看一眼控制台输出 开始分析 首先注意到的是函数的调用顺序 这清晰的证明了AngularJS是如何第一编译所有指令在把他们link他们是scope之前，并且在link阶段被分解为了 , 阶段 注意到 与 函数调用顺序是相同的但是 与他们刚好相反。 所以在这一点上我们已经可以清楚地识别出不同的阶段，那么 与 有什么区别了？他们执行的顺序是相同的，那为什么要把他们分开？ The DOM 为了深入研究，让我们更新JavaScript，以便在每个函数调用期间输出元素的DOM： 注意 行中的额外输出。没有其他更改，原始标记仍然使用。 输出 以下是新添加的代码的输出截图： 再次，如果你想自己尝试一下，只需打开this plnkr并看看控制台。 观察 打印出的DOM显示一些有趣的事：DOM在 与 阶段是不同的。 这里发生了什么 编译 我们已经知道AngularJS在检测到DOM已经准备就绪时会处理DOM。 所以当AngularJS开始遍历DOM，它碰到 元素并且了解到它在匹配我们定义的指令它有额外的动作需要执行 由于在 指令定义对象中定义了一个 函数，他被调用并且相对应的元素DOM被当作参数传入 如果你仔细查看，在这点上，元素的DOM仍然是最初由浏览器使用原始HTML标记创建的DOM。 在AngularJS中 original DOM 常被指代为template element，因此我个人钟意使用 作为参数名，以代表template element。 一旦 指令的 函数已经运行，AngularJS递归地便利深层的DOM并对 和 元素执行同样的编译步骤。 Post-link 在深入 函数之前，让我们先看一看 函数 如果你创建的指令中只有link 函数,AngularJS将它当作 函数，这也是我们先讨论它的原因。 在AngularJS向下传递DOM并运行所有编译 之后，它再次反向遍历并运行所有相关的 函数。 DOM现在在相反的方向上遍历，因此 函数按相反的顺序调用。所以，虽然相反的顺序几分钟前看起来很奇怪，但它现在开始变得非常有意义。 这个相反的顺序保证了在父元素的 函数运行时所有子元素的 函数已经运行。 所以当 的 执行时，我们保证 的 函数已经执行。 这就是为什么它被认为是最安全和默认的添加指令逻辑的原因。 但是元素的DOM呢？这里为什么不同？ 一单AngularJS已经调用了 函数，它创建了一个对应模板元素的 instance element并为instance提供一个scope。The scope可以为一个新的scope或者存在的一个，子scope或者隔离的scope，取决于相应指令定义对象的 属性。 因此，在link发生时，实例元素和范围已经可用，并且它们被AngularJS作为参数传递给 函数。 因此控制台输出有差异 Pre-link 在编写 函数时，可以保证所有子元素的 函数都已经执行。 在大多数情况下，这是非常有意义的，因此它是编写指令代码最常用的地方。 然而AngularJS提供了一个附加的钩子，the 函数，你可以在所有子元素执行 函数之前执行你的代码。 值得重申的是： 函数能保证在所有子istance element执行前先执行。 因此，尽管 函数以相反的顺序调用非常合理，但现在再次以原始顺序调用所有 函数是非常有意义的。 元素的函数被保障在任意子元素的与先执行 回顾 如果我们现在回顾原始输出，我们可以清楚地认识到发生了什么： 总结 回想起来，我们可以如下描述不同的功能和用例： Compile function 使用 来实现在AngularJS创建它的实例之前和创建范围之前更改原始DOM（模板元素）。 虽然可以有多个元素实例，但只有一个模板元素。 指令是这种情况的一个很好的例子。这使得编译功能成为修改DOM的理想场所，以后应该将其应用于所有实例，因为它只会运行一次，因此如果要删除大量实例，则会极大地提高性能。 模板元素和属性作为参数传递给编译函数，但没有scope可用： Pre-link function 使用 函数来实现当AngularJS已经编译子元素时，但在子元素的任何 函数被调用之前运行的逻辑。 scope，instance element和属性作为参数传递给 函数： Here you can see example code of official AngularJS directives that use a pre-link function. Post-link function 使用 函数执行逻辑，所有的子元素已经被编译并且所有子元素的 已经执行。 所以 是被当作最安全和默认的位置放置你的代码。 scope，instance element和属性作为参数传递给 函数： 最后，本篇文章到这就结束 （想看更多就到PHP中文网angularjs学习手册中学习），有问题的可以在下方留言提问