Вложенные директивы с записями

Question

У меня есть набор директив формы, в которых дублирующий код может быть извлечен в отдельную директиву.

Я знаю, что могу использовать transclusion, но не смог идентифицировать какой-либо метод, который позволяет это (клонирование элементов или функции передачи). Учебники по множественным значениям, точкам сайта и нескольким другим описывают извлечение в директиву внутри текущей директивы, но я не смог применить их к моему варианту использования.

Краткое Синопсис: - Две директивы выборочные

<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-полосная связывание поддерживается с нг-модели и переопределяющие атрибуты, такие как обязательные, классы начальной загрузки, регулярное выражение проверки и т. д. в обозревателе my-wrapper или в HTML-элементе, исключающем HTML?

Большое спасибо всем, кто прочитал вопрос. Я с нетерпением жду ваших предложений.

Answer 1

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>