我有一个使用Bootstrap中的标记的表单,如下所示:
<form class="form-horizontal">
<fieldset>
<legend>Legend text</legend>
<div class="control-group">
<label class="control-label" for="nameInput">Name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="nameInput">
<p class="help-block">Supporting help text</p>
</div>
</div>
</fieldset>
</form>
这里有很多样板代码,我想简化为一个新的指令-form-input,如下所示:
<form-input label="Name" form-id="nameInput"></form-input>
产生:
<div class="control-group">
<label class="control-label" for="nameInput">Name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="nameInput">
</div>
</div>
我通过一个简单的模板完成了很多工作。
angular.module('formComponents', [])
.directive('formInput', function() {
return {
restrict: 'E',
scope: {
label: 'bind',
formId: 'bind'
},
template: '<div class="control-group">' +
'<label class="control-label" for="{{formId}}">{{label}}</label>' +
'<div class="controls">' +
'<input type="text" class="input-xlarge" id="{{formId}}" name="{{formId}}">' +
'</div>' +
'</div>'
}
})
但是,当我开始添加更多高级功能时,我就陷入了困境。
我想在指令中将“ type”参数公开为可选属性,例如:
<form-input label="Password" form-id="password" type="password"/></form-input>
<form-input label="Email address" form-id="emailAddress" type="email" /></form-input>
但是,如果未指定任何内容,则默认为"text"
。我该如何支持?
我还希望能够支持“ required”属性(如果存在)。例如:
<form-input label="Email address" form-id="emailAddress" type="email" required/></form-input>
如果required
指令中存在,则要将其添加到<input />
输出中生成的,否则将其忽略。我不确定如何实现这一目标。
我怀疑这些要求可能已经超出了简单的模板,必须开始使用预编译阶段,但我不知从何处开始。
angular.module('formComponents', [])
.directive('formInput', function() {
return {
restrict: 'E',
compile: function(element, attrs) {
var type = attrs.type || 'text';
var required = attrs.hasOwnProperty('required') ? "required='required'" : "";
var htmlText = '<div class="control-group">' +
'<label class="control-label" for="' + attrs.formId + '">' + attrs.label + '</label>' +
'<div class="controls">' +
'<input type="' + type + '" class="input-xlarge" id="' + attrs.formId + '" name="' + attrs.formId + '" ' + required + '>' +
'</div>' +
'</div>';
element.replaceWith(htmlText);
}
};
})
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句