Skip to content

Allow multiple transcluding directives on an element #4357

Closed
vojtajina opened this Issue Oct 9, 2013 · 53 comments
@vojtajina

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

@ravinggenius

This may be a duplicate of #4350.

@IgorMinar IgorMinar added a commit to IgorMinar/angular.js that referenced this issue Oct 11, 2013
@IgorMinar IgorMinar 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
fb875c0
@IgorMinar IgorMinar added a commit to IgorMinar/angular.js that referenced this issue Oct 12, 2013
@IgorMinar IgorMinar 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
1d3fce3
@IgorMinar IgorMinar added a commit that referenced this issue Oct 12, 2013
@IgorMinar IgorMinar 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
63c5334
@Narretz
Narretz commented Dec 18, 2013

+1

@skonieczny

+1

@dberringer

+1

@SimplGy
SimplGy 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.

@jamesdaily jamesdaily added a commit to jamesdaily/angular.js that referenced this issue Jan 27, 2014
@IgorMinar IgorMinar 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
aceef56
@jamesdaily jamesdaily added a commit to jamesdaily/angular.js that referenced this issue Jan 27, 2014
@IgorMinar IgorMinar 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
67cc94a
@quicksnap

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.

@anzeo
anzeo commented Feb 20, 2014

+1

@DavidSouther

+1

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

@cansin
cansin commented Feb 27, 2014

+1

@aeharding

+1

Needed for doing complex + awesome stuff. :-)

@blackgate

+1

@poshest
poshest commented Mar 28, 2014

+1

@gabrielmaldi

+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.

@DavidSouther

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

@jftsaraiva

+1

@nickholub

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>
@jesselpalmer jesselpalmer pushed a commit that referenced this issue Sep 24, 2014
@IgorMinar IgorMinar 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
73a25dd
@maroshii

+1

@dlongley

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

@verdywid

+1

@dgroomes
dgroomes commented Jan 2, 2015

+1

@Beaudinn
Beaudinn commented Jan 8, 2015

+1

@goleafs
goleafs commented Feb 13, 2015

+1 all day long

@dasois
dasois commented Feb 16, 2015

+1

@kleinerroemer

+1

@jbroquist

+1

@yonatanbe

+1

@moneytree-doug

:+1: Is this still on the roadmap?

@squadwuschel

+1

@redaz808
redaz808 commented Jul 2, 2015

+1

@ro0sterjam

+1

@mnewmedia

+1

@danielnord2

+1

@davidetrapani

+1

@gabrielmaldi

This is being worked on in #12934

@petebacondarwin petebacondarwin added a commit that closed this issue Oct 12, 2015
@petebacondarwin petebacondarwin feat($compile): multiple transclusion via named slots
Now you can efficiently split up and transclude content into specified
places in a component's template.

```html
<pane>
  <pane-title>Some content for slot A</pane-title>
  <pane-content>Some content for slot A</pane-content>
</component>
```

```js
mod.directive('pane', function() {
  return {
    restrict: 'E',
    transclude: { paneTitle: '?titleSlot', paneContent: 'contentSlot' },
    template:
    '<div class="pane">' +
      '<h1 ng-transclude="titleSlot"></h1>' +
      '<div ng-transclude="contentSlot"></div>' +
    '</div>' +
  };
});
```

Closes #4357
Closes #12742
Closes #11736
Closes #12934
a4ada8b
@schoettler

+1

@pankajparkar

+1

@Ramon2000

+1

@petebacondarwin
Angular member

This feature is now in Angular 1.5.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.