Question

我在StackOverflow上看过很多关于ng-transclude的问题，但是没有人用外行的术语解释它是什么。

文档中的描述如下：

指示使用包含转义的最近父指令的转换DOM的插入点的指令。

这很令人困惑。有人能够简单地解释一下ng-transclude的目的是什么以及它可能在哪里使用？

Answer 1

Transclude是一个设置，用于告诉angular捕获标记中指令内的所有内容，并在指令＆＃39中使用_{（实际上ng-transclude所在的位置）}。 ; s模板。在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

可视化：

Answer 2

它是一种收益，来自element.html（）的所有内容都会在那里呈现，但指令属性在某个范围内仍然可见。

Answer 3

对于那些来自React世界的人来说，这就像React的{props.children}。

什么是ng-transclude？

3 个答案: