Question

我有两个指令free-form和free-form-canvas

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

自由form.html

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

自由形式-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 free form canvas，

<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。

Answer 1

如上所述New Dev：

您不需要转置 - <free-form>包含<free-form-canvas>的模板，因此它将作为<free-form>的内容包含在内。唯一的区别是在输出中你将有<free-form> <free-form-canvas>....</free-form>，即输出会有一个包裹<free-form>，你在你的例子中没有，但这不重要。如果您真的在乎，可以使用replace：true（虽然它已被弃用）。

如何在指令中使用ng-transclude

1 个答案: