Answers:
Transclude是一种设置,用于告诉angular捕获标记中放置在指令内的所有内容,并在指令模板的某个位置(实际上ng-transclude
是at处)使用它。在指令文档的“ 创建包含其他元素的指令”部分下阅读有关此内容的更多信息。
如果编写自定义指令,则可以在指令模板中使用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
可视化:
transclude
。
这是一种收益,element.html()的所有内容都在那里呈现,但是指令属性在特定范围内仍然可见。
yield
似乎是一个很好的比喻。