manolovnikolay manolovnikolay - 7 months ago 41
Javascript Question

How to make nested transclusion in angular work?

I cannot make nested transclusion work.

There are two directives, both of which declare they will transclude their content. When I nest them, the inner doesn't have any content.

Here is this fiddle, that demonstrates my problem.

Here is the code:

function Ctrl($scope) {
$scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
}

angular.module('transclude', [])
.directive('outer', function(){
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {},
template: '<div style="border: 1px solid black;">' +
'<div>Outer</div>' +
'<inner ng-transclude></inner>' +
'</div>'
};
}).directive('inner', function(){
return {
restrict: 'E',
transclude: true,
replace: true,
template :'<div style="border: 1px solid red;">' +
'<div>Inner</div>' +
'<div ng-transclude></div>' +
'</div>'
};
});

Answer

You should ng-transculde inside the inner directive since transclude replaces the inner html

angular.module('transclude', []).directive('outer', function(){
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template: '<div style="border: 1px solid black;">' +
            '<div>Outer</div>' +
            '<inner><div ng-transclude></div></inner>' +
            '</div>'
        };
});

No change to inner directive needed.

I have updated the fiddle here