什么是NG-transclude？ [英] What is ng-transclude?
问题描述
我已经看到了一些关于StackOverflow的问题讨论了NG-transclude，但没有一个外行的角度解释它是什么。
I have seen a number of questions on StackOverflow discussing ng-transclude, but none explaining in layman's terms what it is.
在文档中的描述如下：
指令标志着对于使用transclusion最近的父指令的transcluded DOM插入点。
Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.
这是相当混乱。会有人能够用简单的术语来解释NG-transclude打算做的，它可能会使用吗？
This is fairly confusing. Would someone be able to explain in simple terms what ng-transclude is intended to do and where it might be used?
推荐答案
Transclude是设置指示角度，以捕获就是把指令里面的标记一切，什么地方使用它<子>（这里实际上是 NG-transclude 是）在指令中的模板。了解更多关于这个在创建一个包装其他元素的指令在文档部分的指令的。
Transclude is a setting to tell angular to capture everything that is put inside the directive in the markup and use it somewhere(Where actually the ng-transclude is at) in the directive's template. Read more about this under Creating a Directive that Wraps Other Elements section on documentation of directives.
如果你写了一个自定义的指令，你用NG-transclude在指令模板标记点要插入元素的内容
If you write a custom directive you use ng-transclude in the directive template to mark the point where you want to insert the contents of the element
angular.module('app', [])
.directive('hero', function () {
return {
restrict: 'E',
transclude: true,
scope: { name:'@' },
template: '<div>' +
'<div>{{name}}</div><br>' +
'<div ng-transclude></div>' +
'</div>'
};
});
如果你把这个在您的标记
If you put this in your markup
<hero name="superman">Stuff inside the custom directive</hero>
这将显示如下：
超人
自定义指令里面的东西。
Stuff inside the custom directive
完整的示例：
的index.html
<body ng-app="myApp">
<div class="AAA">
<hero name="superman">Stuff inside the custom directive</hero>
</div>
</body>
jscript.js
angular.module('myApp', []).directive('hero', function () {
return {
restrict: 'E',
transclude: true,
scope: { name:'@' },
template: '<div>' +
'<div>{{name}}</div><br>' +
'<div ng-transclude></div>' +
'</div>'
};
});
输出标记
![](\"http://i.stack.imgur.com/O0c2L.png\")
可视化：
![](\"http://i.stack.imgur.com/5Uc5r.png\")
这篇关于什么是NG-transclude？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
