Verwenden von ng-transclude in ng-switch

Question

Ich habe Probleme, ng-transclude in einer ng-switch-default-Direktive zu verwenden. Hier ist mein Code:

Richtlinie:

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

partials/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> 

ich es wie so nennen ...

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

die die Fehler produziert:

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

Es reibungslos funktioniert, außerhalb der ng-Switch-Richtlinie, ich bin ratlos, wie wenn diese Funktion zu erhalten. Irgendwelche Vorschläge?

EDIT: Hier ist eine Live-Demo: http://plnkr.co/edit/3CEj5OY8uXMag75Xnliq?p=preview

Answer 1

Entnommen: Github issue

Das Problem ist, dass ng-Schalter ein transcluden auch verwendet, die zu dem Fehler führt.

In diesem Fall sollten Sie eine neue Direktive erstellen, die die richtige $ transclude-Funktion verwendet. Damit dies funktioniert, speichern Sie $ transclude im Controller der übergeordneten Direktive (in Ihrem Fallfeld) und erstellen Sie eine neue Direktive, die auf diesen Controller verweist und die $ transclude-Funktion verwendet.

In Ihrem Beispiel:

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

Im html, Sie verwenden Sie dann nur <div field-transclude> statt <div ng-transclude>. Hier

ist eine aktualisierte Plunker: http://plnkr.co/edit/au6pxVpGZz3vWTUcTCFT?p=preview

Answer 2

Das Problem ist, dass ng-switch seine eigene Einbindung tut. Aus diesem Grund geht Ihre Transclosure mit der Transclusion von ng-switch verloren.

Ich glaube nicht, dass Sie ng-switch hier verwenden können.

können Sie verwenden ng-if oder ng-show statt:

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