0

I have a multi-transclude directive with two slots:

myModule.directive('myDirective', function () {
    return {
        restrict: 'E',
        templateUrl: 'myTemplate.html',
        transclude: {
            'slot1': 'slot1',
            'slot2': 'slot2',
        },
...

It works completely fine if I use it like this:

<my-directive>
  <slot1>Some content</slot1>
  <slot2>Some other content</slot2>
</my-directive>

But, I need to define <slot2> in another directive:

<my-directive>
  <slot1>
     some content
     <another-directive></another-directive>
  </slot1>
</my-directive>

another-directive.html:

<slot2>I want my-directive see this slot</slot2>

Any idea how to achieve this goal?

Arashsoft
  • 2,749
  • 5
  • 35
  • 58
  • That won't work, due to how the DOM tree is built. This is an angularjs limitation. It might be better for you to show the final result that you are trying to achieve, so that people can offer you alternatives to using `transclude`. – Claies Nov 15 '17 at 22:02
  • @Claies, I need my child directive to provide some html content to the parent directive. The general structure is parent directive take care of positioning and show/hide of transclude-slots and child directives provide content of those slots. – Arashsoft Nov 15 '17 at 22:18
  • that's not what your code is showing; The code implies that you want to put HTML content in the parent, and have it appear in the template of the directive's child, which would only work if `another-directive` *also* had transclusion applied. Also, this code would create nested slots, which doesn't exactly make sense. When I say "show the final result", I mean just that, showing **exactly the final markup you are expecting**. – Claies Nov 15 '17 at 22:23
  • you aren't even showing the actual templates, which would have the `ng-transclude="slot1"` and `ng-transclude="slot2"`; I'm *assuming* from your description that they are in the template of `my-directive`, though. Have you considered doing `` instead of putting `` inside the other template? – Claies Nov 15 '17 at 22:30
  • Thank you for the clarification, my final markup is defined in myTemplate.html. And it has logics to position/hide/show slots. The point is I do not want my child directives care about the final markup. They just have to provide slot contents – Arashsoft Nov 15 '17 at 22:32
  • Your suggested template `` is nice but `another-directive` belongs to `slot1` and it needs to provide some contents for `slot2`. My real scenario is `another-directive` is a grid directive (a table) but it wants to pass its header as 'slot2'. And 'my-directive' has some logics to stick header to top of the page and etc... – Arashsoft Nov 15 '17 at 22:40
  • the more I try to work out what it is you are trying to do, the more I'm sure you are misunderstanding how transclusion works. Transclusion is only a one way process, because it's design is to take whatever element is **inside the template** and **replace it completely with the content from outside the template**. You can't transclude from the inside out, because the template would be wiped out before the inner data makes it out. You also can't use it to "side load" data from some other component. – Claies Nov 16 '17 at 00:15

0 Answers0