Nested ng-transclude in Angular

Question

So, I have this piece of code using transclude in angular.

angular.module('playground', []).directive('tagA', function() {
        return {
            replace: true,
            transclude: true,
            controller: function() {
                console.log('controller tagA')
            },
            compile: function($element, $attrs, $link) {
                console.log('compile tagA', $element.html());
                return {
                    pre: function($scope, $element, $attrs, controller, $transclude) {
                        console.log('pre tagA', $element.html());
                    },
                    post: function($scope, $element, $attrs, controller, $transclude) {
                        console.log('post tagA', $element.html());
                    }
                }
            },
            template: '<u><tag-b><div ng-transclude></div></tag-b></u>'
        }
    }).directive('tagB', function() {
        return {
            require: '^tagA',
            transclude: true,
            controller: function() {
                console.log('controller tagB')
            },
            compile: function($element, $attrs, $transclude) {
                console.log('compile tagB', $element.html());
                return {
                    pre: function($scope, $element, $attrs, controller, $transclude) {
                        console.log('pre tagB', $element.html());
                    },
                    post: function($scope, $element, $attrs, controller, $transclude) {
                        console.log('post tagB', $element.html());
                    }
                }
            },
            template: '<h1 ng-transclude></h1>'
        }
    });

And the markup

<tag-a>
    Test
</tag-a>

What I am trying to do is to pass the transcluded content from the parent (tagA) to the child (tagB). The above code works but I don't want to have <div ng-transclude></div> in my tagA's template. Apparently, using <u><tag-b ng-transclude></tag-b></u> doesn't work.

Can someone explain why the later (<u><tag-b ng-transclude></tag-b></u>) doesn't work?

the latter form doesn't work because transclude replaces the inner html, so it would replace the element, and the ng-transclude would no longer be on the inner element. — Claies
– Claies, Commented Jul 12, 2015 at 19:37

Claies · Accepted Answer · 2015-07-12 19:48:45Z

1

The latter form doesn't work, because transclude replaces the inner HTML of the element that ng-transclude is placed on.

In the first, (working you have something like the following):

<tag-a>
  <u>
    <tag-b>
      <div ng-transclude>
        <h1 ng-transclude>
          Test
        </h1>  
      </div>
    </tag-b>
  </u>
</tag-a>

since the inner html is replaced, what you end up with is:

<u>
  <div>
    <h1>
      Test
    </h1>
  <div>
</u>

In the second example, you have:

<tag-a>
  <u>
    <tag-b ng-transclude>
      <h1 ng-transclude>
        Test
      </h1>
    </tag-b>
  </u>
</tag-a>

again, with the Directives removed and the inner html replaced, you get:

<u>
</u>

edited Jul 12, 2015 at 19:48

answered Jul 12, 2015 at 19:33

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tan Nguyen Over a year ago

I think for the working form, my final HTML is u > tag-b > h1 > div > span. This means that div is not replaced/removed but the transcluded content (span) is placed inside div.

Collectives™ on Stack Overflow

Nested ng-transclude in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related