javascript - 如何在 angularjs 中使用嵌入？

Question

在 John Lindquist 教程中，嵌入用于从指令中获取一些内容并将其放在所需的位置。

但是文档讨论了 translude 函数并将其传递给控制器​​和编译函数。那么，什么是嵌入以及如何使用它？

Answer 1

创建基本指令时，嵌入很容易：

module.directive( 'myTransDir', function () {
  return {
    transclude: true,
    scope: true,
    replace: true,
    template: '<div><h1>Hello!</h1><div ng-transclude></div></div>',
  };
});

因为模板包含ngTransclude指令，它会自动为我嵌入内容。如果我这样使用它：

<div my-trans-dir>
  <p>Some Content</p>
</div>

生成的 HTML 将是：

<div>
  <h1>Hello!</h1>
  <div>
    <p>Some Content</p>
  </div>
</div>

Answer 2

@Josh 已经介绍了 ngTransclude。这是嵌入的“正常用例”。

您还询问了文档中的这些陈述：

controller - 控制器构造函数...
控制器可注入以下局部变量：
...
$transclude - 预先绑定到正确的嵌入范围的嵌入链接函数：function(cloneLinkingFn)。

和

compile 函数处理模板 DOM
的转换... compile 函数采用以下参数。
...
transclude - 一个 transclude 链接函数：function(scope, cloneLinkingFn)。

我考虑了这些深奥的嵌入用例。我个人在 stackoverflow 上只看到过一次提到这些，我会在那里向您推荐：
您对 transclude 函数和克隆链接函数究竟做了什么？

来自@blesh 的引用：“这两种嵌入方法使您能够通过对进程的编程访问来控制与您的嵌入有关的一切。”

更新：我发现了一篇关于嵌入的不错的博客文章。

Answer 3

Egghead.io上的Johns “Building Zippy”教程是我见过的关于嵌入的最好描述。您对这两种说法都是正确的，John 只是举了一个例子，但幕后发生的事情是标记中的 html 是通过编译器与模板一起放置的。在他的教程中，John 意外地将内容留在了模板中，您可以看到 Angular 的编译器如何连接标记 html 和模板 html。