Angularjs 如何将HTML传递给angular指令？

我正在尝试使用模板创建angular指令，但我也不想丢失div中的HTML。例如，下面是我希望如何从HTML调用我的指令：

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

还有myDir.html，我在其中定义了一个新元素：

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

即使我将replace设置为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>

谢谢

您需要使用，在指令选项中添加

transclude:true

，并在模板中添加

ng transclude

：

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

`

这个plunkr有一个关于如何在模板中使用ng transclude来保持原始dom元素的示例

---

您必须执行translude:true并使用ng transclude来保持内部div@Ajaybeniwal非常感谢。这与Angular的哪个版本兼容？@MarzSocks我刚刚验证了它与最新的

1.3.4

兼容。请随意试用最新angular版本的plunkr，并查看。angular指令文档说明

transclude

对

scope

执行了一些奇怪的操作：“transclude使具有此选项的指令的内容可以访问指令外部的范围，而不是内部。”（来自）。那么，除了让我使用指令的内部html之外，设置

transclude:true

还会有副作用吗？这在模板中有效吗？我收到以下错误：

error:[ngTransclude:orphan]在模板中非法使用ngTransclude指令
<div class="example" style="…" ng-transclude></div>`