Feature Request: Support "select" for ng-transclude for template inheritance

donaldpipowitch commented 10 years ago

Polymer/custom templates allow to select specific DOM inside templates. It looks like this:

<polymer-element name="x-foo" noscript>
  <template>
    <content select="p"></content>
    <content></content>
  </template>
</polymer-element>

The same would be great for ng-transclude. With this feature you could easily create a version of ng-include which supports block extension/template inheritance (similar to https://github.com/wmluke/angular-blocks).

Example:

// skeleton.html
<header ng-transclude select="#header"></header>
<h1>Welcome to my site!</h1>
<main ng-transclude></main>
<hr>
<footer ng-transclude select="#footer"></footer>

// index.html
<body>
  <ng-extend src="'skeleton.html'">
    <div id="header">My header</div>
    <div class="content">Some articles...</div>
    <!-- even nesting ng-extend and ng-include could work -->
    <ng-include id="footer" src="'footer.html'"></ng-include>
  </ng-extend>
</body>

// index.html - compiled (pseudo code)
<body>
  <ng-extend src="'skeleton.html'">
    <header ng-transclude select="#header">
      <div id="header">My header</div>
    </header>
    <h1>Welcome to my site!</h1>
    <main ng-transclude>
      <div class="content">Some articles...</div>
    </main>
    <hr>
    <footer ng-transclude select="#footer">
      <ng-include id="footer" src="'footer.html'">
        <!-- content of footer.html -->
      </ng-include>
    </footer>
  </ng-extend>
</body>

btford commented 10 years ago

My gut feeling without thinking too hard about this is that implementation-wise, it's going to be more trouble than it's worth.

Narretz commented 9 years ago

A feature like this will land in 1.5: https://github.com/angular/angular.js/commit/a4ada8ba9c4358273575e16778e76446ad080054 :)

angular / angular.js

Feature Request: Support "select" for ng-transclude for template inheritance #8316