如何将HTML传递给angular度指令?

我想创build一个模板的angular度指令,但我也不想丢失的div内的HTML。 例如,这里是我想从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> 

即使当我设置replace为false,我失去了内部的内容,我想要保持分区 – 我对angular docs的理解是,这将被附加在我的模板之后。 有什么办法来保存这个(可能通过我的链接function?),结果将是

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

谢谢!

您需要使用ng-transclude ,在您的指令选项中添加transclude: true ,并将ng-transclude添加到您的模板中:

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

这个plunkr有一个关于如何使用ng-transclude和模板的例子,以保持原来的dom元素。

http://plnkr.co/edit/efyAiTmcKjnhRZMTlNGf