将angularjs输入指令名称设置为变量

我正在尝试设置一个输入，如

<form name="myForm">
    <input name="{{ name }}"/>
</form>

Doh'

我为什么要这样做？我正在尝试创建一个指令，以便以编程方式构建表单。然后我可以做类似的事情

<div my-field
        name="credits"
        field="course.credits"
        field-options="courseOptions.credits"
        title="Credits"
></div>

更新日期2017-03-23： 对于AngularJS>=1.3

---

2014-06-05的原始答案（AngularJS正确 myForm.credits.$dirty:{{myForm.credits.$dirty} JavaScript:

<div ng-app="myApp">
    <form name="myForm" ng-controller="myController">
        <div my-field 
             name="courseName"
             field="course.courseName"
             title="Course Name"></div>
        
        <div my-field 
             name="credits"
             field="course.credits"
             title="Credits"></div>
        
        <!-- Show that the values are bound. -->
        <pre>course: {{course | json:'  '}}</pre>
        <!-- Show that the field is being registered with the ngFormController. -->
        <pre>myForm.credits.$dirty: {{myForm.credits.$dirty}}</pre>
    </form>
</div>

angular.module('myApp', [])
.controller('myController', ['$scope', function($scope){
    $scope.course = {
        credits: {
            title: 'Credits',
            value: 100,
            name: 'credits_field'
        },
        courseName: {
            title: 'Course name',
            value: 'Programming 201',
            name: 'course_name_field'
        }
    };
}])
.directive('dynamicInputName', ['$compile', '$parse', function($compile, $parse){
    return {
        restrict: 'A',
        terminal: true,
        priority: 100000,
        link: function(scope, elem) {
            var name = $parse(elem.attr('dynamic-input-name'))(scope);
            elem.removeAttr('dynamic-input-name');
            elem.attr('name', name);
            $compile(elem)(scope);
        }
    };
}]);

angular.module（'myApp'，[]）
.controller（'myController'，['$scope'，函数（$scope）{
$scope.course={
学分：100，
课程名称：“编程201”
};
}])
.directive（'myField'，['$compile'，'$parse'，function（$compile，$parse）{
//在实际项目中，您可能希望使用“$templateCache”
//在代码中包含字符串。
var tmpl=$compile（'{{title}}'）；
返回{
范围：正确，
链接：功能（范围、元素、属性）{
scope.title=attr.title；
var newEl=角度元素（“”）；
newEl.attr（'ng-model'，attr.field）；
newEl.attr（'name'，attr.name）；
tmpl（范围、功能（fieldEl、范围）{
$compile（newEl[0].outerHTML）（作用域，函数（el，作用域）{
追加（el）；
元素。追加（fieldEl）；
});
});
}
}
}]);

关于此示例的注释：

这是一种非常特殊的情况—生成动态表单元素—需要使用

$compile

。这不是“转到”使用Angular输入和表单时的解决方案-Angular将处理所有常见情况，包括指令、数据绑定和框架提供的所有其他内容。此外，正如Marc Kline的评论所示，Angular似乎在将来的某个时候将处理动态表单管理

---

如果您继续使用

$compile

生成这些表单元素，那么您可能希望使用来管理模板，这样您就不会试图在指令中管理模板字符串。

旧问题，但如果有人正在寻找解决问题的方法，您可以创建指令这将在

$compile

'ing元素后动态创建该元素的名称

@Sly_cardinal发布的答案更新版本如下：

HTML

---

这个问题已经讨论过了。如果你可以发布一个包含到目前为止你所拥有的精简版本的，可以提供一些解决方案。谢谢，我将此标记为答案，因为它很好地解释了情况。作为一个解决方案，我决定暂时不自动输入。相反，我使用transclude每次在我的字段中插入输入。我仍然可以l自动化引导包装和错误处理。

<div ng-app="myApp">
    <form name="myForm" ng-controller="myController">
        <div my-field 
             name="courseName"
             field="course.courseName"
             title="Course Name"></div>
        
        <div my-field 
             name="credits"
             field="course.credits"
             title="Credits"></div>
        
        <!-- Show that the values are bound. -->
        <pre>course: {{course | json:'  '}}</pre>
        <!-- Show that the field is being registered with the ngFormController. -->
        <pre>myForm.credits.$dirty: {{myForm.credits.$dirty}}</pre>
    </form>
</div>

angular.module('myApp', [])
.controller('myController', ['$scope', function($scope){
    $scope.course = {
        credits: 100,
        courseName: 'Programming 201'
    };
}])
.directive('myField', ['$compile', '$parse', function($compile, $parse){
    // In a real project you'd probably want to use '$templateCache' instead
    // of having strings in your code.
    var tmpl = $compile('<label>{{title}}</label>');
    
    return {
        scope: true,
        link: function(scope, element, attr){
            scope.title = attr.title;
            
            var newEl = angular.element('<input type="text"/>');
            newEl.attr('ng-model', attr.field);
            newEl.attr('name', attr.name);
            
            tmpl(scope, function(fieldEl, scope){
                $compile(newEl[0].outerHTML)(scope, function(el, scope){
                    fieldEl.append(el);
                    element.append(fieldEl);
                });
            });
        }
    }
}]);

<div ng-app="myApp">
    <form name="myForm" ng-controller="myController">
        <label for="{{ course.courseName.name }}" ng-bind="course.courseName.title"></label>
        <input id="{{ course.courseName.name }}" dynamic-input-name="course.courseName.name" ng-model="course.courseName.value" type="text" required />
        <br />
        <label for="{{ course.credits.name }}" ng-bind="course.credits.title"></label>
        <input id="{{ course.credits.name }}" dynamic-input-name="course.credits.name" ng-model="course.credits.value" type="number" required />

        <!-- Show that the values are bound. -->
        <pre>course: {{course | json:'  '}}</pre>
        <!-- Show that the field is being registered with the ngFormController. -->
        <pre>myForm.credits_field.$dirty: {{ myForm.credits_field.$dirty }}</pre>
    </form>
</div>

angular.module('myApp', [])
.controller('myController', ['$scope', function($scope){
    $scope.course = {
        credits: {
            title: 'Credits',
            value: 100,
            name: 'credits_field'
        },
        courseName: {
            title: 'Course name',
            value: 'Programming 201',
            name: 'course_name_field'
        }
    };
}])
.directive('dynamicInputName', ['$compile', '$parse', function($compile, $parse){
    return {
        restrict: 'A',
        terminal: true,
        priority: 100000,
        link: function(scope, elem) {
            var name = $parse(elem.attr('dynamic-input-name'))(scope);
            elem.removeAttr('dynamic-input-name');
            elem.attr('name', name);
            $compile(elem)(scope);
        }
    };
}]);