如何在指令中使用动态输入名称

Question

我正在尝试实现一个为表单实现复杂输入类型的指令。为此，必须相应地设置 ng-model（用于绑定值）和 name（用于注册到表单以进行验证）。 虽然 ng-model 可以正常工作，但我找不到动态设置名称的方法。

see Plunker here

.directive('myDirective', function() {
  return {
    template: '<div class="morestuff"><input name="{{name}}" ng-model="ngModel"></div>',
    restrict: 'E',
    replace: true,
    scope: {
      name: '=',
      ngModel: '='
    }
  };

当我在我的表单中使用它时

<form name="myform">
  <input type="text" ng-model="value1" name="name1">
  <my-directive name="name2" ng-model="value2"></my-directive>
</form>

它会在 myform 中生成三个条目：

{
  "name1": {},
  "{{name}}": {},
  "name2": {}
}

所以我的问题：

1. 如何实现所需的行为？
2. 为什么有来自 my-directive 元素的条目？不应该因为 replace: true 而被删除吗？

Answer 1

哟，你应该使用 ng-attr-name

这是一个更新的版本：

http://jsfiddle.net/L99az/1/

对于您的模板：

 <div class="morestuff">
      <input type="text" data-ng-attr-name="{{name}}" ng-model="ngModel"/>
      {{name}}
 </div>

您也可以尝试使用指令的“终端”属性来清除表单的输出。

例如：

http://plnkr.co/edit/z9Jf30KSCOkTM6vEHZwv?p=preview