How to use dynamic input name inside of directive

Question

I'm trying to implement a directive that implements a a complex input type for a form. To achieve this, the ng-model (for binding the value) and name (for registering to the form for validating) have to be set accordingly. While ng-model works as it should, I can't find a way to set the name dynamically.

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: '='
    }
  };

When I use it inside my form like

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

it results in three entries to myform:

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

So my questions:

1. How could I implement the desired behaviour?
2. Why is there an entry from the my-directive element? Shouldn't that have been removed due to replace: true?

Answer 1

Yo, you should use ng-attr-name

Here is an updated version:

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

For your template:

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

You could also try to play with the "terminal" property of the directive to clear the output of your form.

e.g:

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