了解指令定义的 transinclude 选项？

我认为这是我用 angularjs 指令理解的最难的概念之一。

该文档来自http://docs.angularjs.org/guide/directive http://docs.angularjs.org/guide/directive says:

嵌入- 编译元素的内容并使其可用于指令。通常与 ngTransinclude 一起使用。嵌入的优点是链接函数接收预先绑定到正确范围的嵌入函数。在典型的设置中，小部件创建一个隔离范围，但嵌入不是隔离范围的子级，而是隔离范围的同级。这使得小部件可以具有私有状态，并且嵌入可以绑定到父（预隔离）范围。

• true - 包含指令的内容。
• 'element' - 嵌入整个元素，包括以较低优先级定义的任何指令。

It says transclude通常与ngTransclude。但是来自文档的样本ngTransinclude http://docs.angularjs.org/api/ng.directive:ngTransclude不使用ngTransclude根本没有指令。

我想要一些很好的例子来帮助我理解这一点。为什么我们需要它？它解决什么问题？如何使用它？

考虑一个名为我的指令在一个元素中，并且该元素包含一些其他内容，比方说：

<div my-directive>
    <button>some button</button>
    <a href="#">and a link</a>
</div>

If 我的指令正在使用模板，你会看到的内容<div my-directive>将被您的指令模板替换。所以有：

app.directive('myDirective', function(){
    return{
        template: '<div class="something"> This is my directive content</div>'
    }
});

将导致这样的渲染：

<div class="something"> This is my directive content</div> 

请注意，原始元素的内容<div my-directive> 会迷路（或者更好地说，被替换）。那么，跟这些朋友说再见吧：

<button>some button</button>
<a href="#">and a link</a>

那么，如果您想保留自己的<button>... and <a href>...在 DOM 中？你需要一种叫做嵌入的东西。这个概念非常简单：将一处的内容包含到另一处。所以现在你的指令看起来像这样：

app.directive('myDirective', function(){
    return{
        transclude: true,
        template: '<div class="something"> This is my directive content</div> <ng-transclude></ng-transclude>'
    }
});

这将呈现：

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>. 

总之，当您在使用指令时想要保留元素的内容时，基本上可以使用 transinclude。

我的代码示例是here http://jsfiddle.net/7LRDS/1/。 您还可以从观看中受益this https://egghead.io/lessons/angularjs-transclusion-basics.