问题描述
何时应使用 transclude: true
,何时应使用 transclude: element
?
我在棱角文档中找不到有关 transclude:'element'
的任何内容,它们非常令人困惑。
每个选项的好处是什么?它们之间的真正区别是什么?
这就是我发现的内容:
和
从:
transclude:true
因此,假设您有一个名为 my-transclude-true
的指令,该指令声明了 transclude :true
看起来像这样:
< div>
< my-transclude-true>
< span> {{something}}< / span>
{{otherThing}}
< / my-transclude-true>
< / div>
在编译之后和链接之前,它变为:
< div>
< my-transclude-true>
< ;!-已包含->
< / my-transclude-true>
< / div>
我的内容(孩子) transclude-true
是< span> {{something}}< / span> {{...
已被伪装并可用于该指令。
伪装:'element'
如果您有一个名为 my-transclude-element
的指令,并声明了 transclude:'element'
看起来像这样:
< div>
< my-transclude-element>
< span> {{something}}< / span>
{{otherThing}}
< / my-transclude-element>
< / div>
在编译之后和链接之前,它变为:
< div>
< ;!-已包含->
< / div>
此处,整个元素(包括其子元素)已被排除并提供给
链接后会发生什么?
这取决于您的指令执行所需的操作具有transclude功能。 ngRepeat
使用 transclude:'element'
,以便在范围更改时可以重复整个元素及其子元素。但是,如果只需要替换标记并希望保留其内容,则可以将 transclude:true
与 ngTransclude $ c $一起使用c>指令为您执行此操作。
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 :
and
From AngularJS Documentation on Directives:
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'?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!