什么是 ng-transclude？
我在 StackOverflow 上看到了许多讨论 ng-transclude 的问题，但没有一个用外行人的术语解释它是什么。
文档中的描述如下：
为使用嵌入的最近父指令的嵌入 DOM 标记插入点的指令。
这相当令人困惑。有人可以用简单的术语解释 ng-transclude 的用途以及可能在哪里使用吗？
Transclude 是一种设置，用于告诉 Angular 捕获标记中指令内的所有内容，并在指令模板中的某处（实际上 ng-transclude 所在的位置） 使用它。在 documentation of directives 上的创建包装其他元素的指令部分阅读更多相关信息。
如果您编写自定义指令，则在指令模板中使用 ng-transclude 来标记要插入元素内容的点
angular.module('app', [])
.directive('hero', function () {
return {
restrict: 'E',
transclude: true,
scope: { name:'@' },
template: '<div>' +
'<div>{{name}}</div><br>' +
'<div ng-transclude></div>' +
'</div>'
};
});
如果你把它放在你的标记中
<hero name="superman">Stuff inside the custom directive</hero>
它会显示为：
自定义指令中的超人东西
完整示例：
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>'
};
});
Output markup
https://i.stack.imgur.com/O0c2L.png
可视化：
https://i.stack.imgur.com/5Uc5r.png
这是一种产量，来自 element.html() 的所有内容都在那里呈现，但指令属性在特定范围内仍然可见。
yield 似乎是一个很好的类比。
transclude的过程。