什么是ng-transclude?


266

我在StackOverflow上讨论ng-transclude时看到了很多问题,但没有人用外行的术语解释它是什么。

文档中的描述如下:

指令,该指令标记最近的使用转写的父指令的已转写DOM的插入点。

这相当令人困惑。有人能够用简单的术语来解释ng-transclude打算做什么以及可以在哪里使用吗?


1
它基本上是您为特定html标签或指令插入的内容的标记点。将其与指令一起使用,您将更好地理解它。
2014年

Answers:


492

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

在此处输入图片说明

可视化:

在此处输入图片说明


90
比他们的官方文档更好的描述。那使我的头受伤。
卡帕杰

4
好答案!:)您共享的链接帮助我了解的过程transclude
Paulo Oliveira

10
Angular应该使用这种解释,而不是他们目前拥有的文档。
杰里米·W

1
@codeofnode其angular的编译服务,这是相关代码github.com/angular/angular.js/blob/…–
Ben Fischer

1
Stackoverflow答案是
理解

1

这是一种收益,element.html()的所有内容都在那里呈现,但是指令属性在特定范围内仍然可见。


3
我认为最好的答案是完美的,但是如果您来自红宝石背景,那么我同意,这yield似乎是一个很好的比喻。
Apie 2015年

2
@Apie啊,我来自一个红宝石背景
瑟尔布尼古拉-切扎尔
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.