Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow multiple transcluding directives on an element #4357

Closed
vojtajina opened this Issue Oct 9, 2013 · 47 comments

Comments

Projects
None yet
@vojtajina
Copy link
Contributor

commented Oct 9, 2013

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

@ravinggenius

This comment has been minimized.

Copy link

commented Oct 10, 2013

This may be a duplicate of #4350.

IgorMinar added a commit to IgorMinar/angular.js that referenced this issue Oct 11, 2013

fix($compile): abort compilation when duplicate element transclusion
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

IgorMinar added a commit to IgorMinar/angular.js that referenced this issue Oct 12, 2013

fix($compile): abort compilation when duplicate element transclusion
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

IgorMinar added a commit that referenced this issue Oct 12, 2013

fix($compile): abort compilation when duplicate element transclusion
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

This comment has been minimized.

Copy link
Contributor

commented Dec 18, 2013

+1

4 similar comments
@skonieczny

This comment has been minimized.

Copy link

commented Jan 17, 2014

+1

@dberringer

This comment has been minimized.

Copy link

commented Jan 21, 2014

+1

@dmytro-shchurov

This comment has been minimized.

Copy link

commented Jan 21, 2014

+1

@kevin-smets

This comment has been minimized.

Copy link

commented Jan 21, 2014

👍

@SimplGy

This comment has been minimized.

Copy link

commented Jan 24, 2014

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

This comment has been minimized.

Copy link

commented Jan 24, 2014

jamesdaily added a commit to jamesdaily/angular.js that referenced this issue Jan 27, 2014

fix($compile): abort compilation when duplicate element transclusion
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

jamesdaily added a commit to jamesdaily/angular.js that referenced this issue Jan 27, 2014

fix($compile): abort compilation when duplicate element transclusion
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

This comment has been minimized.

Copy link

commented Feb 1, 2014

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

This comment has been minimized.

Copy link

commented Feb 20, 2014

+1

@DavidSouther

This comment has been minimized.

Copy link
Contributor

commented Feb 21, 2014

+1

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

@cansin

This comment has been minimized.

Copy link

commented Feb 27, 2014

+1

@aeharding

This comment has been minimized.

Copy link

commented Feb 28, 2014

+1

Needed for doing complex + awesome stuff. :-)

@blackgate

This comment has been minimized.

Copy link

commented Mar 18, 2014

+1

1 similar comment
@poshest

This comment has been minimized.

Copy link
Contributor

commented Mar 28, 2014

+1

@gabrielmaldi

This comment has been minimized.

Copy link
Contributor

commented Apr 21, 2014

+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

This comment has been minimized.

Copy link
Contributor

commented May 18, 2014

@DavidSouther

This comment has been minimized.

Copy link
Contributor

commented May 19, 2014

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

@jftsaraiva

This comment has been minimized.

Copy link

commented May 22, 2014

+1

@nickholub

This comment has been minimized.

Copy link

commented Jul 11, 2014

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

This comment has been minimized.

Copy link

commented Oct 31, 2014

+1

@dlongley

This comment has been minimized.

Copy link
Contributor

commented Oct 31, 2014

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

@verdywid

This comment has been minimized.

Copy link

commented Dec 16, 2014

+1

3 similar comments
@thomas-j-moffett

This comment has been minimized.

Copy link
Contributor

commented Jan 2, 2015

+1

@dgroomes

This comment has been minimized.

Copy link

commented Jan 2, 2015

+1

@Beaudinn

This comment has been minimized.

Copy link

commented Jan 8, 2015

+1

@goleafs

This comment has been minimized.

Copy link

commented Feb 13, 2015

+1 all day long

@dasois

This comment has been minimized.

Copy link

commented Feb 16, 2015

+1

3 similar comments
@rschoenbichler

This comment has been minimized.

Copy link

commented Mar 8, 2015

+1

@jbroquist

This comment has been minimized.

Copy link

commented Mar 20, 2015

+1

@yonatanbe

This comment has been minimized.

Copy link

commented Mar 30, 2015

+1

@moneytree-doug

This comment has been minimized.

Copy link

commented Apr 1, 2015

👍 Is this still on the roadmap?

@squadwuschel

This comment has been minimized.

Copy link

commented Apr 19, 2015

+1

@redaz808

This comment has been minimized.

Copy link

commented Jul 2, 2015

+1

1 similar comment
@ro0sterjam

This comment has been minimized.

Copy link

commented Jul 18, 2015

+1

@trumbitta

This comment has been minimized.

Copy link

commented Jul 22, 2015

👍 :shipit:

@mnewmedia

This comment has been minimized.

Copy link

commented Aug 5, 2015

+1

2 similar comments
@danielnord2

This comment has been minimized.

Copy link

commented Aug 12, 2015

+1

@davidetrapani

This comment has been minimized.

Copy link

commented Oct 7, 2015

+1

@gabrielmaldi

This comment has been minimized.

Copy link
Contributor

commented Oct 7, 2015

This is being worked on in #12934

@schoettler

This comment has been minimized.

Copy link

commented Nov 10, 2015

+1

2 similar comments
@pankajparkar

This comment has been minimized.

Copy link

commented Nov 16, 2015

+1

@Ramon2000

This comment has been minimized.

Copy link

commented Nov 23, 2015

+1

@petebacondarwin

This comment has been minimized.

Copy link
Member

commented Nov 23, 2015

This feature is now in Angular 1.5.

@brunowego

This comment has been minimized.

Copy link

commented Dec 1, 2015

Thanks @petebacondarwin 👍

@ahmadhsalim

This comment has been minimized.

Copy link

commented Sep 6, 2016

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

This comment has been minimized.

Copy link
Member

commented Sep 6, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.