Директива Wrap с пользовательским HTML (другая директива)

Предположим, у меня есть рабочая директива, называемая <my-directive>. Он выполняет некоторую обработку html и обработку событий, тщательно протестировал.

Теперь я хотел бы обернуть эту директиву другой дирекцией-оболочкой <wrapper>, которая отобразит этот html-фрагмент <div class="my-div">, чтобы я мог писать код следующим образом:

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

и имеют:

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

Как это можно достичь? Я уже пробовал некоторые подходы, никто из них, похоже, не работал, поэтому я не отправляю код.

Ответ 1

Вы можете создать директиву обертки, например

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

Демо: Plunker

Ответ 2

Похоже, что вы отсутствуете ng-transclude во внешнем шаблоне и устанавливаете transclude true во внешней директиве. Атрибут ng-transclude указывает компилятору, чтобы он вставлял внутренний html, если для параметра transclude установлено значение 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