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.
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
}
});
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