了解指令定义transclude选项？ [英] Understanding the transclude option of directive definition?
问题描述
我觉得这是最难的概念对我来说，与angularjs的指示理解的那样。
I think this is one of the hardest concept for me to understand with angularjs's directive.
通过 http://docs.angularjs.org/guide/directive 该文件说：
transclude - 编译元素的内容，并将其提供给指令。通常与ngTransclude使用。 transclusion的优点在于，连接功能接收到一个transclusion功能是$ P $对结合于正确的范围。在典型的设置窗口小部件创建一个分离的范围，但transclusion不是一个孩子，而是分离范围的同级。这使得可以为插件有私有状态，并且transclusion要绑定到父（$ P $对 - 分离株）的范围。
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.
- 真 - transclude指令的内容
- 元素 - transclude包括较低的优先级定义的任何指令，整个元素 。
报告说， transclude 通常与 ngTransclude 使用。但是从 ngTransclude的文档不使用样本 ngTransclude 指令都没有。
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?
推荐答案
考虑一个名为指令的 myDirective 的一个元素，而这个元素被封闭一些其他的内容，让我们说：
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>
如果 myDirective 的使用模板，你会看到的＆LT的内容; DIV我-指令＆GT; 将被替换您的指令模板。因此，有：
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>'
}
});
将导致此呈现：
<div class="something"> This is my directive content</div>
请注意，您的原始元素的含量＆LT; DIV我-指令＆GT; 将会丢失（或更好说，替换）。所以，说再见这些哥们：
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>
所以，如果你想保持你的＆LT;按钮＆GT; ... 和＆LT; A HREF＆GT; ... 中的DOM？你需要一种叫做transclusion。这个概念是pretty简单：包含从一个地方到另一个的内容。所以，现在你的指令将是这个样子：
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" ng-transclude> This is my directive content</div>'
}
});
这将使：
<div class="something"> This is my directive content
<button>some button</button>
<a href="#">and a link</a>
</div>.
总之，你基本上当你当你使用一个指令要preserve元素的内容使用transclude。
In conclusion, you basically use transclude when you want to preserve the contents of an element when you're using a directive.
我的code的例子就是在这里 http://jsfiddle.net/7LRDS/1/
你也可以从看受益：<一href=\"https://egghead.io/lessons/angularjs-transclusion-basics\">https://egghead.io/lessons/angularjs-transclusion-basics
My code example is here http://jsfiddle.net/7LRDS/1/ You could also benefit from watching: https://egghead.io/lessons/angularjs-transclusion-basics
这篇关于了解指令定义transclude选项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
