Directive: transclude in conjuction with terminal #6072
Description
I have tried to understand what's the difference between this:
{
translcude: 'element',
terminal: true
}
And this:
{
translcude: 'element',
terminal: false
}
I made a plunker: http://plnkr.co/edit/yryUHelOMW0gITotKiC7?p=preview
It seems that the contents are pre-compiled on both cases so I though terminal: true
just get ignored when transclude
is used.
Then I saw that these directives: ngIf , ngInclude , ngRepeat all use:
{ trasclude:'element', terminal:true }
.
while other directives like ngSwitch , ngSwitchWhen only use:
{ translcude:'element }'
without a terminal option.
Now I want a clarification to what are the use cases of these two options in conjunction.
Let say I have a piece of DOM:
<div ng-repeat="item in items">
{{ item }}
</div>
Even if $scope.items = []
the contents get compiled before any clones are linked.
I currently develop a module which provides directives that show/hide contents based on media queries ( inspired by zurb foundation interchange), If the media query is not matched then the contents stay out of the DOM ( like ngIf
). here is the repo: https://github.com/IlanFrumer/angular-match-media
What I suggest is that the behavior of transclude
and terminal
together would be to defer compilation and lazy compile it on the first time $transclude is called inside the linking function.
If no clones are needed the contents will never get compiled.
Thanks!