在ng-switch內使用ng-transclude

Question

在ng-switch-default指令中，我無法使ng-transclude工作。這裏是我的代碼：

指令：

.directive('field', ['$compile', function($complile) { 
     return { 
      restrict: 'E', 
      scope: { 
       ngModel: '=', 
       type: '@', 
      }, 
      transclude: true, 
      templateUrl: 'partials/formField.html', 
      replace: true 
     }; 
    }]) 

諧音/ formField.html

<div ng-switch on="type"> 
    <input ng-switch-when="text" ng-model="$parent.ngModel" type="text"> 
    <div ng-switch-default> 
     <div ng-transclude></div> 
    </div> 
</div> 

我叫它是這樣的...

<field type="other" label="My field"> 
    test... 
</field> 

它產生錯誤：

[ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. 

它工作順利，在NG-開關指令之外，我在如何雖然得到這個工作的損失。有什麼建議麼？

編輯： 這裏有一個現場演示：http://plnkr.co/edit/3CEj5OY8uXMag75Xnliq?p=preview

Answer 1

來自Github issue

的問題是，NG-交換機使用transclude爲好，這導致了錯誤。

在這種情況下，您應該創建一個使用正確的$ transclude函數的新指令。爲此，將$ transclude存儲在父指令的控制器中（在您的case字段中），並創建一個引用該控制器並使用其$ transclude函數的新指令。

在您的例子：

.directive('field', function() { 
    return { 
     .... 
     controller: ['$transclude', function($transclude) { 
     this.$transclude = $transclude; 
     }], 
     transclude: true, 
     .... 
    }; 
}) 
.directive('fieldTransclude', function() { 
    return { 
    require: '^field', 
    link: function($scope, $element, $attrs, fieldCtrl) { 
     fieldCtrl.$transclude(function(clone) { 
     $element.empty(); 
     $element.append(clone); 
     }); 
    } 
    } 
}) 

在HTML，你就用<div field-transclude>，而不是<div ng-transclude>。

這裏是一個更新的plunker：http://plnkr.co/edit/au6pxVpGZz3vWTUcTCFT?p=preview

Answer 2

的問題是，ng-switch在做自己的transclusion。正因爲如此，你的跨越在ng-switch的跨越中迷失了方向。我不認爲你可以在這裏使用ng-switch。

您可以使用ng-if或ng-show代替：

<input ng-if="type == 'text'" ng-model="$parent.ngModel" type="{{type}}" class="form-control" id="{{id}}" placeholder="{{placeholder}}" ng-required="required"> 
<div ng-if="type != 'text'"> 
    <div ng-transclude></div> 
</div>