如何将HTML传递给angular指令？

Question

我试图用模板创建一个角度指令,但我也不想丢失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,我也会丢失内部内容 - 我想要保留div - 我对角度文档的理解是,这将被添加到我的模板之后.有没有办法保留这个(可能通过我的链接函数？),以便结果

<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有一个例子,说明如何使用ng-transclude与模板,以保持原始的dom元素.

http://plnkr.co/edit/efyAiTmcKjnhRZMTlNGf