Transcluding multiple elements, bug or intended?

[Foxandxss]

Hello, here is an interesting discussion in SO.

It is hard to explain without looking at the examples provided in that discussion. But I leave you here two plnks with examples:

http://plnkr.co/edit/FUYCQbw8Tnx3Qhcj4108?p=preview
http://plnkr.co/edit/szuDxjGPB8id2yrto7zM?p=preview

Cheers.

[wesbos]

This is a bug, fixed int he latest snapshot

#3627
#3584

[wesbos]

Ah sorry may have read your question wrong, does it relate the posted bugs?

[Foxandxss]

No, is not related. No ng-repeat nor ng-include :)

[lgalfaso]

Hi, you might guess that this is not something simple to explain what is going on, but maybe I can try :-)

Extracting the content of a directive and generating a transclusion function is a compile time operation. The directive ng-transclude adds the content at as a link time operation. What does this mean? that <portlet> transclude function (that is created at compile time) does not have the content placed by dyn-form-portlet (that is put by ng-transclude at link time). This is the way it was designed, so without some changes your code will not work.

The main limitation you will face with a workaround is the fact that at compile time you do not have a $scope and the transclude function needs a scope that is only present at link time

Now, to make this work, what you need to do is allow some cooperation between dyn-form-portlet and <portlet> inside the dyn-form-portlet template so the following happens

1. dyn-form-portlet defines a compile function that returns a link function
2. dyn-form-portlet link function requires a newly defined dyn-form-portlet controller
3. At dyn-form-portlet link, you put the transclude function at the controller
4. At <portlet> you require the dyn-form-portlet controller, retrieve the dyn-form-portlet transclude function and execute it so at the right place so the content is inserted

Not the easiest thing around, but this same technique is used at https://github.com/angular-ui/bootstrap/blob/master/src/tabs/tabs.js

[Foxandxss]

@lgalfaso Interesting. This concrete problem is not mind, I just was kind to report the problem here but obviously I also wanted to learn why it doesn't work. Seeing the tabs.js I understand it.

Since this is not a bug, we better close it 👍

Thanks @lgalfaso