理解指令定义的transclude选项？

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

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

transclude - 编译元素的内容并使其可用于指令。 通常与ngTransclude一起使用。 转换的优点是链接功能接收预先绑定到正确范围的转换函数。 在一个典型的设置中，小部件会创建一个隔离范围，但该隔离不是孩子，而是隔离范围的兄弟。 这使得widget可以拥有私有状态，并且可以将绑定绑定到父（预分离）范围。

真 - transclude该指令的内容。

'元素' - 跨越整个元素，包括以较低优先级定义的任何指令。

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

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

---

考虑一个元素中的一个叫做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中呢？ 你需要一些叫做transclusion的东西。 这个概念非常简单： 将内容从一个地方包含到另一个地方 。 所以现在你的指令看起来像这样：

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。

我的代码示例在这里http://jsfiddle.net/7LRDS/1/您也可以从观看中受益：https：//egghead.io/lessons/angularjs-transclusion-basics

---

我认为在新版本的AngularJS中提及上述行为的变化很重要。 我花了一个小时试图用Angular 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>

谢谢。

---

TechExplorer说的是真实的，但是你可以通过在你的模板中包含一个简单的容器标签（比如div或span）和ng-transclude属性来获得这两种内容。 这意味着模板中的以下代码应包含所有内容

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

链接地址: http://www.djcxy.com/p/77909.html

上一篇: Understanding the transclude option of directive definition?

下一篇: Call method in directive controller from other controller