何时在 Angular 中使用 transclude 'true' 和 transclude 'element'？

小编典典

何时在 Angular 中使用 transclude 'true' 和 transclude 'element'？

all

我应该什么时候使用transclude: 'true'，什么时候使用transclude: 'element'？我在角度文档中找不到任何内容transclude: 'element'，它们非常令人困惑。

如果有人能用简单的语言解释这一点，我会很高兴。每个选项的好处是什么？它们之间的真正区别是什么？

这就是我发现的：

transclude: true
在 compile 函数中，您可以在 transclude 链接函数的帮助下操作 DOM，或者您可以使用任何 HTML 标签上的
ngTransclude 指令将 transcluded DOM 插入到模板中。

和

transclude: 鈥榚lement鈥�
这包含了整个元素，并在编译函数中引入了一个transclude链接函数。您无法在此处访问范围，因为尚未创建范围。Compile
函数为可以访问范围的指令创建一个链接函数，而 transcludeFn 允许您触摸克隆的元素（已被嵌入）以进行 DOM
操作或使用绑定到其中的范围的数据。供您参考，这用于 ng-repeat 和 ng-switch。

阅读 107

2022-08-15

共1个答案

小编典典

来自关于指令的 AngularJS 文档：

transclude- 编译元素的内容并使其可用于指令。通常与 ngTransclude
一起使用。嵌入的优点是链接函数接收一个预先绑定到正确范围的嵌入函数。在典型设置中，小部件会创建一个隔离范围，但嵌入不是子范围，而是隔离范围的兄弟。这使得小部件可以拥有私有状态，并且嵌入绑定到父（预隔离）范围。

true- 嵌入指令的内容。

'element'- 嵌入整个元素，包括以较低优先级定义的任何指令。

嵌入：真

因此，假设您有一个名为my-transclude-true声明的指令transclude: true，如下所示：

<div>
  <my-transclude-true>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-true>
</div>

编译后和链接之前，这变成：

<div>
  <my-transclude-true>
    <!-- transcluded -->
  </my-transclude-true>
</div>

其中 , 的内容（子项）my-transclude-true被<span>{{ something }}</span> {{...嵌入并可用于指令。

嵌入：’元素’

如果您有一个名为my-transclude-element声明的指令transclude: 'element'，如下所示：

<div>
  <my-transclude-element>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-element>
</div>

编译后和链接之前，这变成：

<div>
   <!-- transcluded -->
</div>

在这里， 包括其子元素在内的整个元素 都被嵌入并可供指令使用。

链接后会发生什么？

这取决于您的指令来执行它需要对 transclude 函数执行的操作。ngRepeat使用transclude: 'element'，以便它可以在范围更改时重复整个元素及其子元素。但是，如果您只需要替换标签并希望保留其内容，则可以使用为您执行此操作transclude: true的指令。ngTransclude

2022-08-15