angular.js を使用してカスタム html フォーム要素を作成しようとしています。アイデアは、フォームフィールドレイアウト用のメインテンプレートを 1 つ用意し、テキストフィールド、日付フィールドなどに必要なテンプレートに貼り付けるというものです。
var app = angular.module("myApp", []);
app.controller("MainCtrl", function ($scope) {
$scope.window = window;
});
// create general formfield-layout
function buildFormTemplate(innerTemplate) {
var t = '<div class="control-group">'
+ '<label class="control-label" for="{{x.id}}">{{x.label}}';
t += '<span ng-show="x.required" class="required">*</span>',
t += '</label><div class="controlls">';
t += innerTemplate;
t += '</div>';
t += '</div>';
return t;
}
app.directive("textfield", function() {
return {
restrict: "E",
scope: {},
replace: true,
template: buildFormTemplate('<input id="{{x.id}}" type="text" name="{{x.name}}" value="{{x.value}}" />'),
link: function(scope, elm, attrs) {
scope.x = attrs;
}
};
});
このコードは期待どおりに機能しますが、複数の textfield-elements がある場合、レンダリングされるのは 1 つだけです。他の textfield-elements はなくなりました。
<textfield id="myLabel" label="label1" name="mytext1" value="with label"/>
<textfield id="anotherOne" label="label2" name="mytext2" value=""/>
レンダリング
<div class="control-group" id="myLabel" label="label1" name="mytext1" value="with label">
<label class="control-label ng-binding" for="myLabel">
label1<span ng-show="x.required" class="required" style="display: none;">*</span></label>
<div class="controlls">
<input id="myLabel" type="text" name="mytext1" value="with label">
</div>
</div>
2 番目のテキスト フィールドがなくなりました。私は何が欠けていますか？