Как передать HTML в директиву angular?

Я пытаюсь создать директиву angular с шаблоном, но я также не хочу потерять HTML внутри div. Например, вот как я хотел бы назвать свою директиву из HTML:

<div my-dir>
  <div class="contents-i-want-to-keep"></div>
</div>

Тогда есть моя директива:

app.directive('myDir', [ '$compile', function($compile) {
return {
    restrict: 'E',
    link: function(scope, iElement, iAttrs){
        // assigning things from iAttrs to scope goes here
    },
    scope: '@',
    replace: false,
    templateUrl: 'myDir.html'
};
}]);

а затем есть myDir.html, где я определяю новый элемент:

<div class="example" style="background: blue; height: 30px; width: 30px"></div>

Даже когда я устанавливаю замену на false, я теряю внутреннее содержимое - i-want-to-keep div - мое понимание документов angular состояло в том, что это будет добавлено после моего шаблона. Есть ли способ сохранить это (возможно, через мою функцию привязки?), Чтобы результат был

<div class="example" style="background: blue; height: 30px; width: 30px">
     <div class="contents-i-want-to-keep"></div>
</div>

Спасибо!

Ответ 1