了解指令定义的 transclude 选项? [英] Understanding the transclude option of directive definition?

问题描述

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

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

<块引用>

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

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

它表示 transclude 通常与 ngTransclude 一起使用.但是 ngTransclude 文档中的示例不使用 ngTransclude 指令在全部.

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

解决方案

考虑一个元素中名为 myDirective 的指令，该元素包含一些其他内容，比方说:

<button>一些按钮</button><a href="#">和链接</a>

如果 myDirective 正在使用模板，您将看到

的内容将被您的指令模板替换.所以有:

app.directive('myDirective', function(){返回{模板:'<div class="something">这是我的指令内容</div>'}});

将导致此渲染:

这是我的指令内容

请注意，您的原始元素

将丢失(或者更好的说法是替换)的内容.所以，跟这些小伙伴说再见吧:

一些按钮<a href="#">和链接</a>

那么，如果您想在 DOM 中保留 ... 和 ... 怎么办?你需要一种叫做嵌入的东西.这个概念非常简单:将一个地方的内容包含到另一个地方.所以现在你的指令看起来像这样:

app.directive('myDirective', function(){返回{转置:真实，模板:'<div class="something">这是我的指令内容

<ng-transclude></ng-transclude>'}});

这将呈现:

这是我的指令内容<button>一些按钮</button><a href="#">和链接</a>
.

总而言之，当您在使用指令时想要保留元素的内容时，您基本上会使用 transclude.

我的代码示例是这里.您还可以从观看这个中受益.

I think this is one of the hardest concept for me to understand with angularjs's directive.

The document from http://docs.angularjs.org/guide/directive says:

transclude - compile the content of the element and make it available to the directive. Typically used with ngTransclude. The advantage of transclusion is that the linking function receives a transclusion function which is pre-bound to the correct scope. In a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope. This makes it possible for the widget to have private state, and the transclusion to be bound to the parent (pre-isolate) scope.

• true - transclude the content of the directive.
• 'element' - transclude the whole element including any directives defined at lower priority.

It says transclude typically used with ngTransclude. But the sample from the doc of ngTransclude doesn't use ngTransclude directive at all.

I'd like some good examples to help me understand this. Why do we need it? What does it solve? How to use it?

解决方案

Consider a directive called myDirective in an element, and that element is enclosing some other content, let's say:

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

If myDirective is using a template, you'll see that the content of <div my-directive> will be replaced by your directive template. So having:

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

will result in this render:

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

Notice that the content of your original element <div my-directive> will be lost (or better said, replaced). So, say good-bye to these buddies:

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

So, what if you want to keep your <button>... and <a href>... in the DOM? You'll need something called transclusion. The concept is pretty simple: Include the content from one place into another. So now your directive will look something like this:

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

This would render:

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

In conclusion, you basically use transclude when you want to preserve the contents of an element when you're using a directive.

My code example is here. You could also benefit from watching this.

这篇关于了解指令定义的 transclude 选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！