Verschachtelte Direktiven mit Transclusion

Question

Ich habe eine Reihe von Formulardirektiven, in denen doppelter Code in eine separate Direktive extrahiert werden kann.

Ich weiß, dass ich die Transklusion verwenden kann, aber ich bin nicht in der Lage, eine Technik zu identifizieren, die dies erlaubt (Element Cloning oder Passing-Funktionen). Tutorials zu Pluralsight, SitePoint und wenigen anderen beschreiben die Extraktion in eine Direktive innerhalb der aktuellen Direktive, aber ich konnte sie nicht auf meinen Anwendungsfall anwenden.

Kurzsynopsis: - Zwei Beispiel Richtlinien

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2"> 
    <div class="form-group"> 
    <label ng-show="visible">Input: 
     <input ng-model="person.name" type="text" required> 
    </label> 
    <p ng-show="!visible"> {{person.name}} </p> 
    </div> 
</div> 

Und

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2"> 
    <div class="form-group"> 
    <label ng-show="visible">Input: 
     <select> <option value="volvo">Volvo</option> .... </select> 
    </label> 
    <p ng-show="!visible"> {{person.name}} </p> 
    </div> 
</div> 

Ich wünsche ihnen in Richtlinien zu kondensieren wie

<my-input-box ng-model="person.name" required></my-input-box> 
<my-select-box options = "person.options"></my-select-box> 

wo mein-input-Box-Vorlage ist

<my-wrapper-box><input ng-model="person.name" type="text" required></my-wrapper-box> 

und my-Select-Box-Vorlage ist

<my-wrapper-box><select>......</select></my-wrapper-box> 

Bitte beachten Sie diese Plunker: http://plnkr.co/edit/k6LWjn?p=preview

Wie kann ich den Wrapper-Box extrahieren, so dass 2-Wege mit dem ng-Modell beibehalten wird verbindlich und Überschreiben von Attributen wie erforderlich, Bootstrap-Klassen, Validierungsregex usw. in der My-Wrapper-Box oder dem übersetzten HTML-Element?

Vielen Dank an alle, die die Frage gelesen haben. Ich freue mich auf Ihre Vorschläge.

Answer 1

Plunker.

controller: function(){}, 
bindToController: true, 
controllerAs: 'ctrl', 

und änderte die html zu

<my-wrapper-box> 
    <input type="text" ng-required="reqd" ng-model="ctrl.value" /> 
</my-wrapper-box>