理解指令定义的转换选项？

Question

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

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

transclude -编译元素的内容并将其提供给指令。通常与ngTransclude一起使用。遮挡的优点是连接函数接收到预绑定到正确范围的遮挡函数。在一个典型的设置中，小部件创建一个隔离作用域，但transclusion不是子对象，而是隔离作用域的同级。这使得小部件有可能拥有私有状态，并将transclusion绑定到父(预隔离)作用域。

• 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。

我的代码示例是这里。您也可以从观看这中获益。

Answer 2

我认为在新版本的AngularJS中提到上述行为的变化是很重要的。我花了一个小时试图用1.2.10角来达到上述结果。

不附加ng-transclude元素的内容，而是完全替换.。

因此，在上面的例子中，您将使用“transclude”实现的是：

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

而不是

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

谢谢。

Answer 3

TechExplorer说的是对的，但是可以通过在模板中包含一个带有ng-transclude属性的简单容器标记(如div或span)来获得这两种内容。这意味着模板中的以下代码应该包含所有内容

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