Wrap directive with custom HTML (another directive)

angularjs, angularjs-directive

Solution

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

Problem

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.

Original source