小编典典

何时在 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。


阅读 110

收藏
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