入れ子になったディレクティブ

Question

重複したコードを別のディレクティブに抽出できる一連のフォームディレクティブがあります。

私はtransclusionを使用することができますが、これを可能にする技術（要素の複製または渡し機能）を特定することはできませんでした。 pluralsight、sitepointなどのチュートリアルでは、現在のディレクティブ内のディレクティブへの抽出を記述していますが、私はそれらをユースケースに適用できませんでした。

簡単なあらすじ： - 2つのサンプルディレクティブ

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

そして

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

私は私の入力ボックステンプレートがどこにある

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

のようなディレクティブにそれらを凝縮したいです

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

と私のセレクト・ボックステンプレート

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

あるこのplunkerを参照してください：http://plnkr.co/edit/k6LWjn?p=preview

2ウェイバインディングがNG-モデルで維持されるように、私はラッパーボックスを抽出するにはどうすればよいですmy-wrapper-boxやtranscluded HTML要素の中のrequired、bootstrapクラス、validation regexなどの属性を上書きしますか？

質問を読んだすべての人に感謝します。私はあなたの提案を楽しみにしています。

Answer 1

Plunker。

私はmyInputBoxディレクティブに以下を追加しました：おかげで@tpsilva、 は私はまだbindToControllerとcontrollerAs性質を理解していない、けれども

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

と

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