在指令中自定义模板
在指令中自定义模板
提问于 2012-05-17 10:51:06
我有一个使用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 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 />中，否则忽略它。我不确定如何实现这一点。
我怀疑这些需求可能已经超越了简单的模板，必须开始使用预编译阶段，但我不知道从哪里开始。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10629238
复制相关文章
相似问题
腾讯云开发者
