到目前为止，我所理解的是“指令用于简化 DOM 操作。” 现在是 AngularJS 中的编译和链接功能。我已经阅读了这些主题，但我无法理解使用什么背后的情况。
如果我错了，请纠正我，让我把我的理解也放在这里。当我们只想将一些元素附加到我们的 DOM 时，我们使用 compile 函数。让我们看一下，我想动态地将 5 li 添加到我的 div 中，我会使用编译功能。当我想为这些 li 附加一些事件侦听器时，我会使用链接功能。
谁能告诉我这两个功能与jQuery.
问问题
420 次
1 回答
0
您可能已经注意到，在 angular 中还有其他non-html attributes（在某些情况下还有元素）。这些是与 Angular 本身捆绑在一起的标准指令。在 JQuery 中进行 DOM 操作的方式与在 Angular 中进行相同操作的方式之间存在根本区别。在 JQuery 中，您查询 DOM - 这是什么意思？这意味着一旦你的 HTML 被 DOM 解析器解析，它就会创建一个树结构（ your DOM tree），并且查询实际上是针对这棵树的。
当您运行查询时 - 查询功能会遍历整个 DOM 树，试图找到您想要的 DOM 节点。当它找到它们时，它会收集它们并将这个节点集合返回给您。当然，聪明的 Jquery 开发者经常会缓存这些节点（这样他们就不必再次进行昂贵的查询操作）。一旦通过这样的查询找到了一个 DOM 节点，使用 jquery，我们倾向于操作这个 DOM 节点。操作可以是任何东西，从向其添加更多节点、添加类、添加样式、删除所述节点等。
Angular 在这个查询部分的工作方式略有不同。当 Angular 引导时（在文档就绪时），它会遍历 $rootElement 中的所有 DOM 节点（ $rootElement 是您引导的元素 - 手动传递它或使用 ng-app ）。在遍历这些 DOM 节点时，它会检查每个 DOM 节点的名称及其所有属性、类等。它将这些名称与它已经收集的名称列表相匹配。它定义的指令列表和您定义的指令列表。这个列表实际上是在配置阶段收集的。因此，每次它将节点名称等与它已注册的指令匹配时，它都会编译它。基本上，它将上述 DOM 视为模板 - 您可能听说过在其他模板系统中编译模板。当你编译一个模板时，你会得到一个函数——它实际上是链接函数。当此链接函数被传递数据（即 $scope ）时，它返回最终输出 HTML - 它链接到数据。编译函数总是接受一个模板，然后返回链接函数。链接函数总是获取数据并返回模板。
您可能想知道为什么当我们填写我们编写的所有自定义指令的链接函数时，我们从不返回任何模板。我们在那里编写的那个函数是一个链接后函数钩子（或回调），因此我们不必在那里做任何类型的返回。当您从 compile 函数返回某些内容时也是如此。
当你想对模板进行修改时，你会使用 compile 函数（这就是为什么你很少使用 compile 函数的原因！）。如果要在 DOM 元素与数据挂钩后对其进行修改，则可以使用链接功能。
您可能还想查看此答案以获取更多详细信息：
于 2013-10-02T14:41:00.543 回答