CODEWITHSUNDEEP
javascriptangularjs
CSharp
CSharp

Reputation: 1486

How to write Angularjs nested transcludes

I'm trying to learn angular directives/transclusion to control the creation of some custom panels in my application. I'm going wrong somewhere with transcluded content which is not appearing in the html.

I have the following html markup:

<div panel-widget>
    <!-- this transcluded content appears -->
    <div panel-header></div>
    <div panel-body>This content doesn't</div>
</div>

In my browser I can see the content after the panel-widget directive but not the content in the panel-body directive. Here are my directives, pretty simple so far...

// -----------------------------------------------------------
// PANEL WIDGET DIRECTIVE
// -----------------------------------------------------------
angular.module('myApp.panel')
.directive('panelWidget', [ function() {
 return {
    template: '<div class="panel panel-default"><span ng-transclude></span</div>',
    restrict: 'A',
    transclude: true,
    };
}]);

//-----------------------------------------------------------
//PANEL WIDGET DIRECTIVE
//-----------------------------------------------------------
angular.module('myApp.panel')
.directive('panelHeader', [ function() {
   return {
     template: '<div class="panel-heading"><h3 class="panel-title"><em>This appears</em></h3></div>',
    restrict: 'A',
    scope: {
        headerObj: '='
    }
};
}]);

// -----------------------------------------------------------
// PANEL WIDGET DIRECTIVE
// -----------------------------------------------------------
angular.module('myApp.panel')
.directive('panelBody', [ function() {
  return {
    template: '<div class="panel-body"><span ng-translude></span></div>',
    restrict: 'A',
    transclude: true,
    scope: {
        panelBodyObj: '='
    }
  };
}]);

Does anyone know why the nested ng-transclude isn't working? Possibly an issue with the scope?

Thanks in advance!

Upvotes: 1

Views: 94

Answers (2)

Suvrajyoti Chatterjee
Suvrajyoti Chatterjee

Reputation: 107

You have misspelled ng-transclude in the panelBody directive :)

Upvotes: 1

Michael Hays
Michael Hays

Reputation: 6908

You have a simple typo:

template: '<div class="panel-body"><span ng-translude></span></div>',

Replace ng-translude with ng-transclude.

http://plnkr.co/edit/iDiImVrhgP7ZJMa2YCz4?p=preview

:-)

Upvotes: 3

Related Questions