Question

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

.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": {}
}

所以我的问题：

我如何实现所需的行为？
为什么my-directive元素中有一个条目？不应该因为替换而被删除：是吗？

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>

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

e.g：

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

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

1 个答案: