Question

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

我知道我可以使用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-select-box模板是

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

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

如何提取包装器框，以便在my-wrapper-box或transcluded HTML元素中使用ng-model和覆盖属性（如必需，引导类，验证正则表达式等）维护双向绑定？

非常感谢所有读过这个问题的人。我期待着你的建议。

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>

带嵌套的嵌套指令

1 个答案: