什么是 ng-transclude？
Posted
技术标签:
【中文标题】什么是 ng-transclude？【英文标题】：What is ng-transclude? 【发布时间】：2014-09-03 17:05:43 【问题描述】：我在 *** 上看到了许多讨论 ng-transclude 的问题，但没有一个用外行的术语解释它是什么。
文档中的描述如下：
为使用嵌入的最近父指令的嵌入 DOM 标记插入点的指令。
这相当令人困惑。有人能用简单的术语解释一下 ng-transclude 的用途和用途吗？
【问题讨论】：
它基本上是您为特定 html 标记或指令插入的任何内容的标记点。将它与指令一起使用，您会更好地理解它。 【参考方案1】：对于那些来自 React 世界的人来说，这就像 React 的props.children。
【讨论】：
【参考方案2】：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
可视化：
【讨论】：
这是比他们的官方文档更好的描述。那个让我头疼。 很好的答案！ :) 你分享的链接帮助我了解transclude的过程。
Angular 应该使用这个解释而不是他们目前拥有的文档。
@codeofnode 其angular的编译服务，这里是相关代码github.com/angular/angular.js/blob/…
*** 答案是了解角度概念的最佳方式【参考方案3】：
这是一种收益，来自 element.html() 的所有内容都在那里呈现，但指令属性在特定范围内仍然可见。
【讨论】：
我认为最佳答案是完美的，但如果您来自红宝石背景，那么我同意，yield 似乎是一个很好的类比。
@Apie 是的，我来自红宝石背景以上是关于什么是 ng-transclude？的主要内容，如果未能解决你的问题，请参考以下文章