Proposal for multiple transclusion targets

[ravinggenius]

When transcluding into a directive, it would be super useful to specify multiple targets. Polymer makes this easy with the <content /> element, together with the [select] attribute.

What I'm proposing is to allow [ng-transclude] (in the target directive template) to take an optional CSS selector, which would select content from the source (where the directive was used) and stick it into the appropriate place in the template. For instance:

<!-- foo directive usage -->
<foo>
  <p>Regular content goes here.</p>
  <foo-footer>
    <p>I show up in the footer.</p>
  </foo-footer>
</foo>

<!-- foo directive template -->
<div class="foo">
  <div class="foo-body" ng-transclude />
  <div class="foo-footer" ng-transclude="foo-footer" />
</div>

<!-- foo directive dom (after rendering) -->
<div class="foo">
  <div class="foo-body">
    <p>Regular content goes here.</p>
  </div>
  <div class="foo-footer">
    <p>I show up in the footer.</p>
  </div>
</div>

[DavidSouther]

+1

[Wizek]

#7270 Is the main roadblock preventing this from happening as far as I can see.
#7240 is a related inconvenience, but it can be worked around.

[vanduc1102]

+1

[douglas-treadwell]

+1

[bvaughn]

+1

[douglas-treadwell]

https://github.com/wmluke/angular-blocks provides this functionality.

[nickholub]

Workaround for this can be implemented with 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>

[tonylampada]

+1

[mucsi96]

+1

[dbwhddn10]

+1

[giodamelio]

👍