Nested ng-transclude in Angular - angularjs

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>