问题描述
我已经看到了一些关于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插入点。
这是相当混乱。会有人能够用简单的术语来解释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 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>'
};
});
输出标记
可视化：
这篇关于什么是NG-transclude？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！