考虑在一个元素中一个名为 myDirective 的指令，该元素正在封装其他内容，比如说：
<div my-directive> <button>some button</button> <a href="#">and a link</a></div>
如果 myDirective 使用的是模板，则会看到的内容
<div my-directive>将被指令模板替换。因此具有：
app.directive('myDirective', function(){ return{ template: '<div > This is my directive content</div>' }});将导致此渲染：
<div > This is my directive content</div>
请注意，原始元素的内容
<div my-directive>将丢失 （或更确切地说， 将被 替换）。因此，与这些伙伴说再见：
<button>some button</button><a href="#">and a link</a>
那么，如果您想保留您的
<button>...和
<a href>...DOM，该怎么办？您将需要一种称为“包含”的东西。这个概念非常简单：
将内容从一个地方包含到另一个地方 。因此，现在您的指令将如下所示：
app.directive('myDirective', function(){ return{ transclude: true, template: '<div > This is my directive content</div> <ng-transclude></ng-transclude>' }});这将呈现：
<div > This is my directive content <button>some button</button> <a href="#">and a link</a></div>.
总之，当您使用指令时要保留元素的内容时，基本上可以使用transclude。
我的代码示例在这里。你也可以受益于看这个。
