Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Wrap directive with custom HTML (another directive)

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.

like image 633
ŁukaszBachman Avatar asked Mar 26 '13 10:03

ŁukaszBachman


2 Answers

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

like image 98
Arun P Johny Avatar answered Nov 09 '22 02:11

Arun P Johny


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

like image 30
charlietfl Avatar answered Nov 09 '22 03:11

charlietfl