Wrap directive with custom HTML (another directive)

Question

Assume I have working directive called <my-directive>. It does some html rendering and event handling, it's thoroughly tested.

Now I'd like to wrap this directive with another wrapper directive <wrapper> which will render this html snippet <div class="my-div">, so that I could write code like this:

<wrapper>
   <my-directive></my-directive>
</wrapper>

and have:

<div class="my-div">
   <my-directive></my-directive>
</div>

How can achieve that? I've tried some approaches before, none of them seemed to be working so I'm not posting any code.

Solution 1

You can create the wrapper directive like

app.directive('wrapper', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    template: '<div class="my-div" ng-transclude></div>'
  };
});

Demo: Plunker

Solution 2

It sounds like you are missing ng-transclude in outer template and setting transclude true in outer directive. The ng-transclude attribute tells compiler wheere to insert the inner html when transclude is set to true

app.directive('wrapper',function(){
 return {
   restrict:'E',
   template: '<div>Outer wrapper text<div ng-transclude></div></div>',
   transclude: true,
   replace:true
 }
});

DEMO http://plnkr.co/edit/sfbRyPZjqsTG6cuiaXZV?p=preview

Comments

[ŁukaszBachman]

Thanks, that did the trick. I had to accept the other response, thought, as Arun was first. I hope you don't mind :)