何时在 Angular 中使用 transclude 'true' 和 transclude 'element'? [英] When to use transclude 'true' and transclude 'element' in Angular?

问题描述

我应该什么时候使用 transclude: 'true' 以及什么时候使用 transclude: 'element' ?我在 angular 文档中找不到关于 transclude: 'element' 的任何内容，它们非常令人困惑.

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

这是我发现的:

<块引用>

transclude: true

在编译函数中，您可以借助 transclude 链接函数来操作 DOM，或者您可以在任何 HTML 标签上使用 ngTransclude 指令将被嵌入的 DOM 插入到模板中.

和

<块引用>

transclude: ‘元素’

这会嵌入整个元素，并且在编译函数中引入了一个嵌入链接函数.您无法在此处访问作用域，因为作用域尚未创建.Compile 函数为可以访问作用域的指令创建一个链接函数，并且 transcludeFn 允许您触摸克隆元素(已被嵌入)以进行 DOM 操作或使用绑定到其中的作用域的数据.供您参考，这用于 ng-repeat 和 ng-switch.

解决方案

来自 AngularJS 指令文档:

<块引用>

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

<块引用>

true - 嵌入指令的内容.

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

嵌入:真实

假设您有一个名为 my-transclude-true 的指令，它使用 transclude: true 声明，如下所示:

<my-transclude-true><span>{{某事}}</span>{{其他东西}}</my-transclude-true>

编译后链接前变成:

<my-transclude-true><!-- 内嵌--></my-transclude-true>

my-transclude-true 的内容(子项)，即 {{ something }}</span>{{..., 被嵌入并可供指令使用.

嵌入:'元素'

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

<my-transclude-element><span>{{某事}}</span>{{其他东西}}</my-transclude-element>

编译后链接前变成:

<!-- 内嵌-->

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

链接后会发生什么?

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

When should I use transclude: 'true' and when transclude: 'element' ? I cant find anything about transclude: 'element' in the angular docs, they are pretty confusing.

I would be happy if someone could explain this in simple language. What is the benefit of each option? What is the real difference between them?

This is what I have found :

transclude: true

Inside a compile function, you can manipulate the DOM with the help of transclude linking function or you can insert the transcluded DOM into the template using ngTransclude directive on any HTML tag.

and

transclude: ‘element’

This transcludes the entire element and a transclude linking function is introduced in the compile function. You can not have access to scope here because the scope is not yet created. Compile function creates a link function for the directive which has access to scope and transcludeFn lets you touch the cloned element (which was transcluded) for DOM manipulation or make use of data bound to scope in it. For your information, this is used in ng-repeat and ng-switch.

解决方案

From AngularJS Documentation on Directives:

transclude - compile the content of the element and make it available to the directive. Typically used with ngTransclude. The advantage of transclusion is that the linking function receives a transclusion function which is pre-bound to the correct scope. In a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope. This makes it possible for the widget to have private state, and the transclusion to be bound to the parent (pre-isolate) scope.

true - transclude the content of the directive.

'element' - transclude the whole element including any directives defined at lower priority.

transclude: true

So let's say you have a directive called my-transclude-true declared with transclude: true that looks like this:

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

After compiling and before linking this becomes:

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

The content (children) of my-transclude-true which is <span>{{ something }}</span> {{..., is transcluded and available to the directive.

transclude: 'element'

If you have a directive called my-transclude-element declared with transclude: 'element' that looks like this:

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

After compiling and before linking this becomes:

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

Here, the whole element including its children are transcluded and made available to the directive.

What happens after linking?

That's up to your directive to do what it needs to do with the transclude function. ngRepeat uses transclude: 'element' so that it can repeat the whole element and its children when the scope changes. However, if you only need to replace the tag and want to retain it's contents, you can use transclude: true with the ngTransclude directive which does this for you.

这篇关于何时在 Angular 中使用 transclude 'true' 和 transclude 'element'?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！