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

一尘不染

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

angularjs

什么时候应该使用transclude: 'true'以及何时transclude: 'element'？我transclude: 'element'在angular文档中找不到任何有关它们的信息，这非常令人困惑。

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

这是我发现的：

transclude: true
在编译函数内部，您可以借助transclude链接函数来操作DOM，也可以使用任何HTML标记上的ngTransclude指令将已嵌入的DOM插入模板中。

和

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

阅读 218

2020-07-04

共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为您执行此操作的指令一起使用。

2020-07-04