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.
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With