How to make nested transclusion in angular work?

Question

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>'
     };
 });

Shreyance Jain · Accepted Answer · 2013-10-17 17:27:16Z

9

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

answered Oct 17, 2013 at 17:27

Shreyance Jain

9447 silver badges13 bronze badges

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

4 Comments

manolovnikolay Over a year ago

Thanks. Now it seems obvious. :)

KayakDave Over a year ago

One thing to note is that this approach adds extra markup which, if you're doing a deep nesting, can get a bit messy. transclude:element avoids that. But for your use either is probably good.

Shreyance Jain Over a year ago

@KayakDave If we remove this extra markup inner html of outer div would not get transcluded whether you use transclude:element. Let me know if I am wrong. Thanks :)

KayakDave Over a year ago

Yea, oops- I was thinking about a rather more complex and different scenario I had just been looking at. For your situation, you're right.

Nick Bolles · Accepted Answer · 2016-05-03 17:59:11Z

Another way to do this, which can be useful in self contained components is displayed in this JSFiddle

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

This will pass the transclude: true down the dom tree to the inner directive.

The downside of this is that the cannot be used by itself and in the jsfiddle it throws an ngTransclude: Orphan Directive Error

Because of this I require that the inner directive be a child of the outer directive, that way it will always have the transclusion passed down to it.

This is really nice to break up large directives into smaller ones.

Collectives™ on Stack Overflow

How to make nested transclusion in angular work?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related