我在 StackOverflow 上看到了许多讨论 ng-transclude 的问题，但没有一个用外行人的术语解释它是什么。
文档中的描述如下：
为使用嵌入的最近父指令的嵌入 DOM 标记插入点的指令。
这相当令人困惑。有人可以用简单的术语解释 ng-transclude 的用途以及可能在哪里使用吗？
问问题
88769 次
3 回答
510
Transclude 是一种设置，用于告诉 Angular 捕获标记中指令内的所有内容，并在指令模板中的某处（实际上ng-transclude是在哪里）使用它。在有关指令文档的创建包装其他元素的指令部分中阅读有关此内容的更多信息。
如果您编写自定义指令，则在指令模板中使用 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
可视化：
于 2014-07-13T17:48:01.727 回答
4
对于那些来自 React 世界的人来说，这就像 React 的{props.children}.
于 2020-12-01T04:26:29.137 回答
1
这是一种产量，来自 element.html() 的所有内容都在那里呈现，但指令属性在特定范围内仍然可见。
于 2015-10-05T19:51:12.687 回答