什么是ng-transclude？
Cod*_*rer 257 angularjs transclusion angularjs-directive
我在StackOverflow上看到了很多关于ng-transclude的问题,但是没有人用外行的术语解释它是什么.
文档中的描述如下:
指示使用包含转义的最近父指令的转换DOM的插入点的指令.
这相当令人困惑.有人能够简单地解释一下ng-transclude的目的是什么以及它可能在哪里使用？
The*_* GS 482
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
可视化:
- 这是比官方文档更好的描述.那个让我头疼. (85认同)
- Angular应该使用此解释而不是他们当前拥有的文档. (9认同)
- 很棒的答案!:)你分享的链接帮助我理解`transclude`的过程. (4认同)
- Stackoverflow 答案是理解角度概念的最佳方式 (2认同)