我在StackOverflow上看到了很多关于ng-transclude的问题,但是没有一个用门外汉的术语解释它是什么。

文档中的描述如下:

指示符,该指示符标记最近的使用透光的父指示符的透光DOM的插入点。

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


当前回答

Transclude是一个设置,它告诉angular捕获标记中指令内的所有内容,并在指令模板中的某个地方(ng-transclude实际所在的位置)使用它。更多信息请参见创建封装其他元素的指令文档部分。

如果你编写一个自定义指令,你可以在指令模板中使用ng- transinclude来标记你想要插入元素内容的点

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>'
    };
  });

输出标记

可视化:

其他回答

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

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

Transclude是一个设置,它告诉angular捕获标记中指令内的所有内容,并在指令模板中的某个地方(ng-transclude实际所在的位置)使用它。更多信息请参见创建封装其他元素的指令文档部分。

如果你编写一个自定义指令,你可以在指令模板中使用ng- transinclude来标记你想要插入元素内容的点

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>'
    };
  });

输出标记

可视化: