angularjs - 什么是ng-transclude？

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

文档中的描述如下:

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

最佳答案

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

可视化: