次のような入力を設定しようとしています
<form name="myForm">
<input name="{{ name }}"/>
</form>
ドームで動作します。そうですか
<input name="whatever_name_is_set_to"/>
しかし、私のngFormには
$scope.myForm: {
{{ name }}: { }
}
ドッ
なぜ私はこれをしているのですか？プログラムでフォームを作成できるように、ディレクティブを作成しようとしています。次に、次のようなことができます
<div my-field
name="credits"
field="course.credits"
field-options="courseOptions.credits"
title="Credits"
></div>
AngularJS >= 1.3の場合、入力名で補間がサポートされるようになりました。
昨日、動的に名前が付けられたフォーム要素に関する同様の質問に答えました。要するに、補間を使用してフォーム フィールドに動的に名前を付けることはできません。これまで見てきたように、補間文字列がフィールド名になります。
あなたの場合、myFieldディレクティブ内の入力 HTML を動的にコンパイルすることを検討する必要があるでしょう。
$compileフォーム要素を動的に生成するために使用する簡単な例を次に示します: http://jsfiddle.net/Sly_cardinal/XKYJ3/
HTML:
<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>
JavaScript:
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);
});
});
}
}
}]);
この例に関する注意:
これは非常に特殊な状況 (動的フォーム要素の生成) であり、 を使用する必要があります$compile。これは、Angular の入力とフォームを操作する場合の "go to" ソリューションではありません。Angular は、ディレクティブ、データ バインディング、およびフレームワークが提供するその他すべての一般的な状況を処理します。さらに、Marc Kline のコメントが示すように、Angular は将来のある時点で動的フォーム管理自体を処理するように見えます。
これらのフォーム要素を生成するために使用するパスを続行する場合は、ディレクティブ内のテンプレート文字列を管理しようとしないように$compile、おそらく$templateCacheを使用してテンプレートを管理することをお勧めします。
古い質問ですが、質問されたことを実行する方法を誰かが探している場合は、要素の名前を動的に作成するディレクティブを作成できます$compile。
@Sly_cardinal が投稿した回答の更新版はこちら: http://jsfiddle.net/XKYJ3/1/
HTML
<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>
Javascript
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);
}
};
}]);