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
所以,让我们说你有一个名为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的内容(children)是< span> {{something}}< / span> {{…,被转录并且可用于指令。
transclude:’element’
如果你有一个名为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指令,为您执行此操作。