嵌套指令與transclusion

我有一套表單指令，其中重複的代碼可以提取到一個單獨的指令。嵌套指令與transclusion

我知道我可以使用transclusion，但還沒有能夠識別任何允許使用這種方法（元素克隆或傳遞函數）的技術。有關pluralsight，sitepoint和其他幾個教程的講解將描述提取到當前指令中的指令中，但我無法將它們應用到我的用例中。

簡要說明： - 兩個樣本指令

<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 classes，validation regex等屬性？

非常感謝所有讀過這個問題的人。我期待着你的建議。

來源

2016-09-06 Nilesh Parkhe

Plunker。

我已經添加了以下到myInputBox指令：

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

，改變了HTML來

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

來源

2016-09-06 13:25:39 tpsilva

感謝@tpsilva，雖然，我還沒有理解bindToController和controllerAs性質，您的修復程序確實解決了我的問題非常感謝。 –

嵌套指令與transclusion

回答

相關問題