了解指令定义的transclude选项？

Question

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

http://docs.angularjs.org/guide/directive中的文档说：

transclude-
编译元素的内容并将其提供给指令。通常与ngTransclude一起使用。包含的优点是链接功能接收一个预先绑定到正确作用域的包含功能。在典型的设置中，小部件创建隔离范围，但包含不是子项，而是隔离范围的同级。这使得小部件可以具有私有状态，并且可以将包含项绑定到父（预隔离）范围。

• true-排除指令的内容。
• ‘element’-包括整个元素，包括以较低优先级定义的所有指令。
  
  

它说transclude通常与一起使用ngTransclude。但是ngTransclude文档中的示例根本不使用ngTransclude指令。

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

Answer 1

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

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

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