到目前为止我所理解的是“指令用于简化 DOM 操作”。现在来了 AngularJS 中的编译和链接功能。我已经阅读过这些主题，但我无法了解使用什么背后的情况。
如果我错了请指正，我也把我的理解放在这里。当我们只想将一些元素附加到 DOM 时，我们可以使用编译函数。假设我想动态添加 5 li 到我的 div 中，我会使用编译函数。当我想为这些 li 附加一些事件监听器时，我会使用链接函数。
任何人都可以向我展示这两个函数与 jQuery 的实际差异/用途。
最佳答案
您可能已经注意到，在 Angular 中还有其他非 html 属性(在某些情况下还有元素)。这些是与 Angular 本身捆绑在一起的标准指令。在 JQuery 中进行 DOM 操作的方式与在 Angular 中进行 DOM 操作的方式存在根本区别。在 JQuery 中，您查询 DOM - 这意味着什么？这意味着一旦 DOM 解析器解析了 HTML，它就会创建一个树结构(您的 DOM 树)，并且查询实际上是针对这棵树的。
当您运行查询时 - 查询函数会遍历整个 DOM 树，尝试找到您想要的 DOM 节点。当它找到它们时，它会收集它们并将该节点集合返回给您。当然，聪明的 Jquery 开发人员经常会缓存这些节点(这样他们就不必再次执行昂贵的查询操作)。一旦通过这样的查询找到了一个 DOM 节点，我们就可以使用 jquery 来操作这个 DOM 节点。操作可以是任何内容，从向其附加更多节点、添加类、添加样式、删除所述节点等。
Angular 在这个查询部分的工作方式略有不同。当 Angular 引导时(文档准备就绪)，它会遍历 $rootElement 内的所有 DOM 节点( $rootElement 是您引导的元素 - 手动传递或使用 ng-app )。在遍历这些 DOM 节点时，它会检查每个 DOM 节点的名称及其所有属性、类等。它将这些名称与它已经收集的名称列表进行匹配。它已定义的指令列表和您已定义的指令列表。该列表实际上是在配置阶段收集的。因此，每次它将节点名称等与其注册的指令相匹配时，都会对其进行编译。基本上，它将上述 DOM 视为模板 - 您可能听说过在其他模板系统中编译模板。当你编译一个模板时，你会得到一个函数——它实际上是链接函数。当此链接函数传递数据(即 $scope )时，它会返回最终输出 HTML - 链接到数据。编译函数总是采用模板，然后返回链接函数。链接函数总是获取数据并返回模板。
您可能想知道为什么当我们填写我们编写的所有自定义指令的链接函数时，我们从不返回任何模板。我们在那里编写的函数有一个后链接函数钩子(Hook)(或回调)，因此我们不必在那里进行任何类型的返回。当您从编译函数返回某些内容时也是如此。
当你想要修改模板时，你可以使用编译函数(这就是为什么你很少使用编译函数!)。如果您想在 DOM 元素与数据连接后对其进行修改，则可以使用链接函数。
您可能还想查看此答案以获取更多详细信息:
关于javascript - 相当于JQuery中Angular Js的编译链接功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19138285/