包含嵌入的嵌套指令

Question

我有一组表单指令，其中可以将重复的代码提取到单独的指令中。

我知道我可以使用嵌入，但无法识别任何允许这样做的技术（元素克隆或传递函数）。关于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>

请看这个插件：http://plnkr.co/edit/k6LWjn?p=preview

如何提取包装盒，以便在 my-wrapper-box 或嵌入的 HTML 元素中使用 ng-model 和覆盖属性（如 required、引导类、验证正则表达式等）维护 2 路绑定?

非常感谢所有阅读此问题的人。我期待您的建议。

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>