Allow multiple transcluding directives on an element #4357

vojtajina · 2013-10-09T23:43:24Z

I believe it's possible, so let's try it.

ravinggenius · 2013-10-10T14:41:17Z

This may be a duplicate of #4350.

Issue an error and abort compilation when two directives that ask for transclusion are found on a single element. This configuration is not supported and we previously failed to issue the error because in the case of element transclusion the compilation is re-started and this caused the compilation context to be lost. The ngRepeat directive has been special-cased to bypass this warning because it knows how to handle this scenario internally. This is not an ideal solution to the problem of multiple transclusions per element, we are hoping to have this configuration supported by the compiler in the future. See angular#4357. Closes angular#3893 Closes angular#4217 Closes angular#3307

Issue an error and abort compilation when two directives that ask for transclusion are found on a single element. This configuration is not supported and we previously failed to issue the error because in the case of element transclusion the compilation is re-started and this caused the compilation context to be lost. The ngRepeat directive has been special-cased to bypass this warning because it knows how to handle this scenario internally. This is not an ideal solution to the problem of multiple transclusions per element, we are hoping to have this configuration supported by the compiler in the future. See #4357. Closes #3893 Closes #4217 Closes #3307

Narretz · 2013-12-18T22:50:22Z

+1

skonieczny · 2014-01-17T09:42:52Z

+1

dberringer · 2014-01-21T04:08:50Z

+1

dmytro-shchurov · 2014-01-21T14:43:11Z

+1

kevin-smets · 2014-01-21T21:12:59Z

👍

SimplGy · 2014-01-24T19:03:21Z

A great idea. Very much like the Marionette region concept, or ui-router's idea of sibling views, but constrained to a single directive. #4350 gives the example of a modal or something with a body and a title. You could also use this for window/side pane and other ui structures that have multiple content panes.

SimplGy · 2014-01-24T19:20:53Z

Looks like you can transclude into multiple locations "manually": https://web.archive.org/web/20130721070741/http://blog.omkarpatil.com/2012/11/transclude-in-angularjs.html
fiddle:
http://jsfiddle.net/ospatil/A969Z/158/

Issue an error and abort compilation when two directives that ask for transclusion are found on a single element. This configuration is not supported and we previously failed to issue the error because in the case of element transclusion the compilation is re-started and this caused the compilation context to be lost. The ngRepeat directive has been special-cased to bypass this warning because it knows how to handle this scenario internally. This is not an ideal solution to the problem of multiple transclusions per element, we are hoping to have this configuration supported by the compiler in the future. See angular#4357. Closes angular#3893 Closes angular#4217 Closes angular#3307

quicksnap · 2014-02-01T00:55:01Z

Great idea. Just came across a use case for this, wanting to transclude with an attribute directive after ng-include on the same element. Was hoping it would just priority-order the transcludes.

thomaux · 2014-02-20T08:03:45Z

+1

DavidSouther · 2014-02-21T19:48:33Z

+1

This is IMHO one of the best parts of the Web Components / Shadow DOM spec

cansin · 2014-02-27T01:53:02Z

+1

aeharding · 2014-02-28T15:56:16Z

+1

Needed for doing complex + awesome stuff. :-)

blackgate · 2014-03-18T17:20:50Z

+1

poshest · 2014-03-28T23:38:21Z

+1

gabrielmaldi · 2014-04-21T15:54:00Z

+1

I have an element directive with replace: true and transclude: true; when using it I apply another attribute directive to it that also transcludes. As @quicksnap, I expected the transclusions to respect the directives' priorities.

caitp · 2014-05-18T01:09:38Z

@Maxmaxmaximus what?

DavidSouther · 2014-05-19T12:39:34Z

@Maxmaxmaximus it is a fantastic idea, it's just not been implemented yet. See also #7270

jftsaraiva · 2014-05-22T16:48:04Z

+1

nickholub · 2014-07-11T04:22:28Z

Got workaround for this when used in custom directive.
Idea is to capture content with one directive and transclude in the template with another.
Live demo http://nickholub.github.io/angular-composite-component
Source code https://github.com/nickholub/angular-composite-component

<div cs-composite>
    <div cs-section="header">
        Composite Component Header
    </div>
    <div cs-section="footer">
        Composite Component Footer
    </div>
</div>

maroshii · 2014-10-31T12:38:22Z

+1

dlongley · 2014-10-31T14:24:34Z

One implementation of multi-transclude: https://github.com/zachsnow/ng-multi-transclude

gusverdywid · 2014-12-16T05:45:46Z

+1

ghost · 2015-01-02T00:49:31Z

+1

dgroomes · 2015-01-02T18:05:29Z

+1

Beaudinn · 2015-01-08T10:57:44Z

+1

goleafs · 2015-02-13T16:44:38Z

+1 all day long

dasois · 2015-02-16T13:31:30Z

+1

rschoenbichler · 2015-03-08T10:29:58Z

+1

jbro-io · 2015-03-20T00:29:21Z

+1

yonatanbe · 2015-03-30T07:53:12Z

+1

moneytree-doug · 2015-04-01T05:56:51Z

👍 Is this still on the roadmap?

squadwuschel · 2015-04-19T09:30:52Z

+1

redaz808 · 2015-07-02T05:46:27Z

+1

ro0sterjam · 2015-07-18T05:04:11Z

+1

trumbitta · 2015-07-22T11:42:10Z

👍

pablomaurer · 2015-08-05T09:08:54Z

+1

dnord91 · 2015-08-12T14:11:02Z

+1

davidetrapani · 2015-10-07T11:57:05Z

+1

gabrielmaldi · 2015-10-07T15:04:54Z

This is being worked on in #12934

schoettler · 2015-11-10T18:59:47Z

+1

pankajparkar · 2015-11-16T09:46:55Z

+1

Ramon2000 · 2015-11-23T08:41:39Z

+1

petebacondarwin · 2015-11-23T09:50:54Z

This feature is now in Angular 1.5.

brunowego · 2015-12-01T17:52:08Z

Thanks @petebacondarwin 👍

ahmadhsalim · 2016-09-06T10:30:58Z

There's a scenario which requires to allow multiple directives on same element that uses transclusion.
For eg: mdButton from angular materials library uses transclude: true. And I have created a directive called ifCan where I input permission slugs to show/hide the element. The ifCan directive has transclude: 'element'. This gives an error, eg:

Multiple directives [ifCan, mdButton (module: material.components.button)] asking for transclusion on: <md-button ui-sref="professionals.create" if-can="professionals.store" class="md-icon-button">

ngIf directive does the same thing with transclude: 'element' but it does not throw error due to a private property called $$tlb when declaring the directive. If there's a way to allow multiple transcluding directives without using a private property then it'll be solved. For now I'm using $$tlb: true as a workaround to fix this, which is actually unreliable because it's private.

petebacondarwin · 2016-09-06T10:40:51Z

@ahmadhsalim - please create a new issue if you have a problem. It is best not to try to add on to close issues.

vojtajina mentioned this issue Oct 9, 2013

ng-If doesn't work with ng-Include #3307

Closed

aeharding mentioned this issue Apr 22, 2014

ngTrasclude: Do you plan on supporting multi-translcude? #7197

Closed

btford removed the post-1.2-milestone label Aug 20, 2014

petebacondarwin added the Lots of comments label Jun 15, 2015

petebacondarwin closed this as completed in a4ada8b Oct 12, 2015

fsmeier mentioned this issue May 23, 2018

Allow multi transclude directives like ngIf - expose $$tlb #16574

Closed

3 tasks

Allow multiple transcluding directives on an element #4357

Allow multiple transcluding directives on an element #4357

Comments

vojtajina commented Oct 9, 2013

ravinggenius commented Oct 10, 2013

Narretz commented Dec 18, 2013

skonieczny commented Jan 17, 2014

dberringer commented Jan 21, 2014

dmytro-shchurov commented Jan 21, 2014

kevin-smets commented Jan 21, 2014

SimplGy commented Jan 24, 2014

SimplGy commented Jan 24, 2014

quicksnap commented Feb 1, 2014

thomaux commented Feb 20, 2014

DavidSouther commented Feb 21, 2014

cansin commented Feb 27, 2014

aeharding commented Feb 28, 2014

blackgate commented Mar 18, 2014

poshest commented Mar 28, 2014

gabrielmaldi commented Apr 21, 2014

caitp commented May 18, 2014

DavidSouther commented May 19, 2014

jftsaraiva commented May 22, 2014

nickholub commented Jul 11, 2014

maroshii commented Oct 31, 2014

dlongley commented Oct 31, 2014

gusverdywid commented Dec 16, 2014

ghost commented Jan 2, 2015

dgroomes commented Jan 2, 2015

Beaudinn commented Jan 8, 2015

goleafs commented Feb 13, 2015

dasois commented Feb 16, 2015

rschoenbichler commented Mar 8, 2015

jbro-io commented Mar 20, 2015

yonatanbe commented Mar 30, 2015

moneytree-doug commented Apr 1, 2015

squadwuschel commented Apr 19, 2015

redaz808 commented Jul 2, 2015

ro0sterjam commented Jul 18, 2015

trumbitta commented Jul 22, 2015

pablomaurer commented Aug 5, 2015

dnord91 commented Aug 12, 2015

davidetrapani commented Oct 7, 2015

gabrielmaldi commented Oct 7, 2015

schoettler commented Nov 10, 2015

pankajparkar commented Nov 16, 2015

Ramon2000 commented Nov 23, 2015

petebacondarwin commented Nov 23, 2015

brunowego commented Dec 1, 2015

ahmadhsalim commented Sep 6, 2016 • edited Loading

petebacondarwin commented Sep 6, 2016

ahmadhsalim commented Sep 6, 2016 •

edited

Loading