了解指令定义的嵌入选项？

小编典典

了解指令定义的嵌入选项？

all

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

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

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

true - 嵌入指令的内容。

‘element’ - 包含整个元素，包括以较低优先级定义的任何指令。

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

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

阅读 107

2022-07-09

共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>...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>.

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

我的代码示例在这里。你也可以从观看中受益。

2022-07-09