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?

Answer 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>