feat(ngTranscludeSelect): add ng-transclude-select directive for multi-transclusion

[kara]

I've updated the PR to make the syntax closer to <content select> tags (and thus make migration to Angular 2 a bit easier). To transclude in multiple points, you simply:

• set transclude to true
• use ng-transclude-select directives in your template to mark transcludable sections
• when using the directive, add the appropriate selectors to match the template's ng-transclude-select selectors.

Example usage:

index.html

<my-container>
   <div head>This is head content.</div>
   <div body>This is body content.</div>
   <div foot>This is foot content.</div>
</my-container>

myContainer.js

angular.module('app', [])
.directive('myContainer', function() {
   return {
      transclude: true,
      template: [
         '<header ng-transclude-select="[head]"></header>',
         '<main ng-transclude-select="[body]"></main>',
        '<footer ng-transclude-select="[foot]"></footer>'
      ].join('')
   };
});

The output in the DOM would be something like:

   <header ng-transclude-select="[head]">
      <div head>This is head content.</div>
   </header>
   <main ng-transclude-select="[body]">
      <div body>This is body content.</div>  
   </main>
   <footer ng-transclude-select="[foot]">
      <div foot>This is foot content.</div>
   </footer>

The implementation needs work. There are some hacks like wrapping the clone to use querySelector - would love to replace that with something better. Another implementation option would be to do all the matching at once - so you could throw an error at any unused clone elements (currently, they are just being cleaned up).

[kara]

This is definitely code smell, but I couldn't figure out a better way to search the clone by selector. Any suggestions on how to improve?

[petebacondarwin]

Hi @kara. Sorry I haven't got round to this yet. Trying to finish up the 1.4.0 issues.
Next week I promise!

[kara]

@petebacondarwin No problem! Know you've been busy with 1.4.

Whenever you have a chance, let me know if you have any suggested changes. There is at least one notable hack (regarding wrapping the clone) that I would love to replace with something better if possible.

[petebacondarwin]

I have added this to the list of things to discuss in our 1.5 planning

[petebacondarwin]

@IgorMinar is going to take a look this week. There have been developments in the WebComponents API that we ought to take into account for this PR perhaps.

[petebacondarwin]

We should consider making the API similar to the SLOT proposal for ShadowDOM: See https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md.

[IgorMinar]

The thing is that the slotting api style makes the implementation as well as usage of this feature more cumbersome. The only thing we'd gain is similarity with an evolving standard. I don't think that it is worth it in Angular 1.

One significant drawback of the current implementation is that it will transclude as many times as many instance of ngTranscludeSelect we find in the components template. This is pretty wasteful and will become a perf issue for bigger apps. Could we address this?

It's quite hard to find a good way for this transcluded dom to be shared, since it needs to be accessible from any child node that triggers the ngTranscludeSelect directive, but how about we monkey-patch the $transclude service in this case using a private ($$-prefixed) field?

[petebacondarwin]

After talking with @IgorMinar we agreed that some form of slot based algorithm would make it easier to avoid the performance problems. I am going to make a quick spike this week. I can't remember if this is close to what @kara had in her previous PR. If we agree it is viable then perhaps, @kara, you would have time to work on the full implementation?

The idea would be that some directive say ng-slot would be used to provide a slot name to nodes in the HTML that is to be transcluded. When the compiler is compiling a directive that requests transclusion, it would remove these nodes, and provide named transclusion functions to the post link function, and so also to the ng-transclude directive:

Example:

<my-container>
   <div ng-slot="head">This is head content.</div>
   <div>This is body content.</div>
   <div ng-slot="foot">This is foot content.</div>
</my-container>

angular.module('app', [])
.directive('myContainer', function() {
   return {
      transclude: true,
      link: function(scope, element, attr, controller, transcludeFn, transcludeSlots) {
        // here the transcludeSlots parameter will look like:
        // { head: headTranscludeFn, foot: footTranscludeFn }
        // The transcludeFn will contain anything that was not in a slot
        // where each function is a pre-bound (to its own transclusion scope) transclude function
      },
      template: [
         '<header ng-transclude="head"></header>',
         '<main ng-transclude></main>',
        '<footer ng-transclude="foot"></footer>'
      ].join('')
   };
});

[kara]

@IgorMinar @petebacondarwin Thanks for taking a look! The changes you're suggesting make a lot of sense. Yeah, I can definitely make time to rewrite the functionality with the slot implementation you outlined.