我正在用 AngularJS 做一个更大的项目。因此,我想让单个表单的工作尽可能简单。由于我们也在使用引导程序,因此表单中单个输入字段的代码非常冗长,可能像
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
如果我可以写一个像
<custom-input
label="Email"
name="inputEmail"
placeholder="Email"
type="text"
... >
</custom-input>
相反,这将有助于保持代码干净和工作简单。
为了实现这一点,我正在开发一个自定义 AngularJS 指令。我的指令当前使用类似于上面的引导示例的模板,自动将标签分配给输入标签。此外,该指令的编译器函数将所有属性从自定义输入标记移动到真正的输入标记,以便轻松自定义自定义输入标记。
app.directive('customInput', function() {
return {
require: 'ngModel',
restrict: 'E',
template: '<div>' +
'<label for="{{ name }}">the label</label>' +
'<input id="{{ name }}" ng-model="ngModel" />' +
'</div>',
scope: {
ngModel: '=',
name: '@name',
},
replace: true,
compile: function (tElement, tAttrs, transclude) {
var tInput = tElement.find('input');
// Move the attributed given to 'custom-input'
// to the real input field
angular.forEach(tAttrs, function(value, key) {
if (key.charAt(0) == '$')
return;
tInput.attr(key, value);
tInput.parent().removeAttr(key);
});
return;
},
};
});
在 Stack Overflow 上,有很多关于创建自定义输入字段的问题,但他们关心的是数据绑定、自定义格式或绑定到 ng-repeat。
然而,我的方法有一个不同的问题:虽然数据绑定正常工作,但当输入字段为“必需”时,Angular 的集成表单验证模块会感到困惑。出于某种原因,验证无法识别新的输入字段,而是因为某些无效引用而使表单无效,该引用具有空值。请参阅最小示例。
死引用从何而来?如何更新验证模块的引用?有没有更好的方法来实现我的总体目标?