angularjs - 如何将 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>

即使我将替换设置为false，我也会丢失内部内容-i-want-to-keep 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