包含嵌入的嵌套指令

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>

我的-select-框模板是

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

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

如何提取包装盒，以便使用 ng-model 和覆盖属性（如必需的 bootstrap 类、验证正则表达式等）维护双向绑定my-wrapper-box 或嵌入的 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>

包含嵌入的嵌套指令

Nested directives with transclusion

angularjs

twitter-bootstrap-3

angularjs-directive

angularjs-ng-transclude

transclusion