在指令中自定义模板
在指令中自定义模板
提问于 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 />中，否则忽略它。我不确定如何实现这一点。
我怀疑这些需求可能已经超越了简单的模板，必须开始使用预编译阶段，但我不知道从哪里开始。
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-05-18 12:36:21
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);
}
};
})Stack Overflow用户
发布于 2013-12-18 21:44:59
我尝试使用Misko提出的解决方案，但在我的情况下，需要合并到我的模板html中的一些属性本身就是指令。
不幸的是，并不是结果模板引用的所有指令都能正常工作。我没有足够的时间深入研究angular代码并找出根本原因，但我找到了一个解决方法，这可能会有所帮助。
解决方案是将创建模板html的代码从编译转移到模板函数。基于上述代码的示例：
angular.module('formComponents', [])
.directive('formInput', function() {
return {
restrict: 'E',
template: 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>';
return htmlText;
}
compile: function(element, attrs)
{
//do whatever else is necessary
}
}
})Stack Overflow用户
发布于 2013-10-16 10:47:14
不幸的是，上面的答案并不完全有效。特别是，编译阶段不能访问作用域，因此不能基于动态属性自定义该字段。使用链接阶段似乎提供了最大的灵活性(在异步创建dom等方面)。下面的方法解决了这个问题：
<!-- Usage: -->
<form>
<form-field ng-model="formModel[field.attr]" field="field" ng-repeat="field in fields">
</form>// directive
angular.module('app')
.directive('formField', function($compile, $parse) {
return {
restrict: 'E',
compile: function(element, attrs) {
var fieldGetter = $parse(attrs.field);
return function (scope, element, attrs) {
var template, field, id;
field = fieldGetter(scope);
template = '..your dom structure here...'
element.replaceWith($compile(template)(scope));
}
}
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10629238
复制相关文章
相似问题