Как передать HTML в угловую директиву?

Question

Я пытаюсь создать угловую директиву с шаблоном, но я также не хочу терять 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> 

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

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

Спасибо!

Answer 1

Вы должны будете использовать ng-transclude, добавьте transclude: true в настройках директивы, и добавьте ng-transclude в шаблон:

<div class="example" style="…" ng-transclude></div>` 

Это plunkr есть пример того, как использовать нг-transclude с шаблоном, чтобы сохраните исходный элемент dom.

http://plnkr.co/edit/efyAiTmcKjnhRZMTlNGf