Angular transclude directive inside another transclude directive

Question

I have an angular directive inside of another directive. Both use transclude: true.

I would expect if I had the following code (taken from the plunker) that I would see the same thing 3 times.

https://plnkr.co/edit/iIyU65WdMr4jDQyKZpt1?p=preview

JS:

angular.module('app', [])

.directive('myButton', myButton)

.directive('directiveWithDirective', directiveWithDirective)

.directive('directiveWithDiv', directiveWithDiv);

function myButton(){
  return {
            restrict: 'E',
            transclude: true,
            template: '<button ng-transclude> </button>'
        };
}

function directiveWithDirective(){
  return {
            restrict: 'E',
            transclude: true,
            template: '<my-button ng-transclude> </my-button>'
        };
}

function directiveWithDiv(){
  return {
            restrict: 'E',
            transclude: true,
            template: '<div ng-transclude> </div>'
        };
}

HTML:

<div ng-app="app">
  <my-button>
    A Button
  </my-button>
  <br>
  <directive-with-directive>
    A Button
  </directive-with-directive>
  <br>
  <directive-with-div>
    <div>
      <my-button>
        A Button
      </my-button>
    </div>
  </directive-with->
</div>

my-button and directive-with-div behave as I would expect. They include their content in the template.

However, directive-with-directive does not. I would expect the text "a button" to be included inside of my-button then, my-button be expanded into a button. Instead I see a blank directive:

<my-button ng-transclude=""> </my-button>.

I expect

<my-button ng-transclude=""><button>A Button</button> </my-button>

My questions are:

What am I misunderstanding about this? Is it related to the order in which directives are expanded by angular? Can I change this?

How can I achieve having a directive with transclusion within another transcluded directive.

Steeve Pitis · Accepted Answer · 2016-03-01 10:54:31Z

2

I think you can solve your problem with this :

function directiveWithDirective(){
  return {
            restrict: 'E',
            transclude: true,
            template: '<my-button><ng-transclude /> </my-button>'
        };
}

answered Mar 1, 2016 at 10:54

Steeve Pitis

4,4631 gold badge24 silver badges25 bronze badges

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

2 Comments

Matt Lishman Over a year ago

Fantastic! This is exactly what I was looking for. Must have missed it. Updated plunker with working solution: plnkr.co/edit/E8oE2qaTfgSCtCGMYwMO?p=preview

Matt Lishman Over a year ago

@etiennecrb Found more info here: docs.angularjs.org/api/ng/directive/ngTransclude

Collectives™ on Stack Overflow

Angular transclude directive inside another transclude directive

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related