了解指令定义的transclude选项？

了解指令定义的transclude选项？

考虑在一个元素中一个名为 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。

我的代码示例在这里。你也可以受益于看这个。