Javascript 如何在指令中使用ng transclude

我有两个指令

free-form

和

free-formcanvas

<div ng-repeat="controls in ctrls">
   <free-form></free-form>
</div>

free-form.html

<div id="{{controls.uiControlInstanceId}}">
  <free-form-canvas data-controls="controls"></free-form-canvas>
</div>

free-form-canvas.html

<div>
  <!-- ctrl -->
  <div ng-switch on="ctrl.controlProps[1].containerInstance.uiContainerTypeId">
    <div ng-switch-when="NAVIGATOR">
      <navigation></navigation>
    </div>
    <div ng-switch-when="CAROUSEL_VIEW">
      <carousel></carousel>
    </div>
    <web-tile ng-switch-when="WEB_TILE" class="drag_tiles" tilegroup="tileGroups">
    </web-tile>
<!-- <news-bulletin data-bulletin="" ng-switch-when="WEB_BULLETIN_BOARD"></news-bulletin> -->
  </div>
  <floating-options></floating-options>
  <floating-popup></floating-popup>
</div>

但我需要制作transclude自由形式画布

<div ng-repeat="controls in ctrls">
  <div id="{{controls.uiControlInstanceId}}">
    <free-form-canvas data-controls="controls"></free-form-canvas>

    <!-- I need to include free form canvas here it self but nothing gets display -->

    <div>
      <!-- ctrl -->
      <div ng-switch on="ctrl.controlProps[1].containerInstance.uiContainerTypeId">
        <div ng-switch-when="NAVIGATOR">
          <navigation></navigation>
        </div>
        <div ng-switch-when="CAROUSEL_VIEW">
          <carousel></carousel>
        </div>
        <web-tile ng-switch-when="WEB_TILE" class="drag_tiles" tilegroup="tileGroups">
        </web-tile>
<!-- <news-bulletin data-bulletin="" ng-switch-when="WEB_BULLETIN_BOARD"></news-bulletin> -->
      </div>
      <floating-options></floating-options>
      <floating-popup></floating-popup>
    </div>

  </div>
</div>

---

通过使用

ng transclude

我可以解决这个问题，但我不知道如何使用

ng transclude

如上所述的

New Dev

：

---

您不需要转包-

具有带有

的模板，因此它将作为

的内容包含在内。唯一的区别是，在输出中您将有

…

，即输出将有一个包装

，这在您的示例中是没有的，但这并不重要。如果您真的在意，可以使用replace:true（尽管它已被弃用）

---

您不需要转包-

具有带有

的模板，因此它将作为

的内容包含在内。唯一的区别是，在输出中您将有

…

，即输出将有一个包装

，这在您的示例中是没有的，但这并不重要。如果您真的在意，您可以使用

replace:true

（尽管它已被弃用）