问题描述
我在 StackOverflow 上看到了许多讨论 ng-transclude 的问题,但没有一个用外行的术语解释它是什么.
文档中的描述如下:
标记最近使用嵌入的父指令的嵌入 DOM 的插入点的指令.
这相当令人困惑.有人能用简单的术语解释 ng-transclude 的目的是什么以及它可以用在什么地方吗?
Transclude 是一个设置,它告诉 angular 捕获放在标记中指令内的所有内容并在某处使用它 在指令的模板中.在
可视化:
I have seen a number of questions on StackOverflow discussing ng-transclude, but none explaining in layman's terms what it is.
The description in the documentation is as follows:
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 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.
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>
It would show up like:
Full example :
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
Visualize :
这篇关于什么是 ng-transclude?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!