Question

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

但是文档讨论了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 - Controller构造函数...
  控制器可注射以下当地人：
  ...
  $ transclude - 预先绑定到正确的转换范围的转换链接函数：function（cloneLinkingFn）。

和

编译功能处理转换模板DOM ...
编译函数采用以下参数 ...... transclude - 一个transclude链接函数：function（scope，cloneLinkingFn）。

我认为这些深奥的翻译用例。我个人只在stackoverflow上看到过这一点，我会在那里推荐你：
What exactly do you do with the transclude function and the clone linking function?

来自@blesh的引用：“这两种翻译方法可以让您通过对流程的编程访问控制所有关于您的转换。”

更新：我找到了一个很好的blog post关于翻译。

Answer 3

在egghead.io上的Johns“Building Zippy”教程是我在翻译时看到的最好的描述。你对这两个陈述都是正确的，John只是给出了一个例子，但是幕后发生的事情是标记中的html是通过编译器与模板一起发出的。在他的教程中，John在事故中将内容留在模板中，您可以看到angular的编译器如何连接标记html和模板html。

如何在angularjs中使用transclusion？

3 个答案: