AngularJS Multiple Transclusion

Question

Ich habe eine AngularJS-Direktive mit mehreren Transclusions und ein Transclusions-Slot wird von einem Formular umschlossen.

Alles funktioniert gut außer den Formularüberprüfungsnachrichten.

Die Richtlinie Vorlage:

<ng-form name="nbcardform" ng-submit="submit()" novalidate> 
    <ng-transclude ng-transclude-slot="back"></ng-transclude> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <button type="submit">Save</button> 
     </div> 
    </div> 
</ng-form> 

Hier ist ein Beispiel für die Richtlinie Nutzung:

<nb-card> 
    <nb-card-back> 
     <input type="text" name="username" ng-model="vm.username" required> 
     <div ng-messages="nbcardform.username.$error" role="alert"> 
      <div ng-message="required">Required field</div> 
     </div> 
    </nb-card-back> 
<nb-card> 

Aus irgendeinem Grund der Ausdruck nbcardform.username.$error nicht definiert ist.

Kann mir jemand dabei helfen?

Answer 1

Sie sollten ein Unterformular in Ihrer Direktive erstellen, da der Bereich (wahrscheinlich?) Anders ist und keine Ahnung hat, was nbcardform ist.

<nb-card ng-form="myDirectiveForm"> 
    <nb-card-back> 
     <input type="text" name="username" ng-model="vm.username" required> 
     <div ng-messages="myDirectiveForm.username.$error" role="alert"> 
      <div ng-message="required">Required field</div> 
     </div> 
    </nb-card-back> 
<nb-card> 

Dies wird noch schön Draht in und in der übergeordneten Richtlinie könnten Sie so etwas wie folgt verwenden:

<ng-form name="nbcardform" ng-submit="submit()" novalidate> 
    <ng-transclude ng-transclude-slot="back"></ng-transclude> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <button type="submit">Save</button> 
     </div> 
    </div> 
    {{ nbcardform.$valid }} 
    {{ nbcardform.myDirectiveForm.$valid }} 
    {{ nbcardform.myDirectiveForm.username.$valid }} 
</ng-form> 

Answer 2

Haben Sie versucht:

<div ng-messages="vm.username.$error" role="alert"> 

Answer 3

Der transkludierte Inhalt der äußere Umfang verwendet es sei denn, Sie geben in Ihrer Verknüpfungsfunktion einen anderen Bereich für die Transclude-Funktion an. Siehe "Bereitstellen eines eigenen Transklusionsbereichs" here. Beachten Sie, dass Sie danach möglicherweise nicht mehr auf vm verweisen können.