[英]Form field validation inside Angular directive not working properly
我使用的是AngularJS的最新版本,它是1.2rc3以及用于样式的Bootstrap,并且具有如下指令:
angular.module('form.field', [])
.directive('efield', function() {
return {
restrict: 'E',
scope: {
form: '@',
fname: '@',
label: '@'
},
template: "<div data-ng-class=\"{{form}}.{{fname}}.$valid ? 'form-group' : 'form-group has-error'\">" +
"<label class='control-label' for='{{fname}}'>{{label}}</label>" +
"<input type='text' class='form-control' name='{{fname}}' data-ng-required='false' data-ng-model='Form.test'>" +
"</div>"
}
});
html片段如下所示:
<form name="form" novalidate="novalidate">
<efield form="form" fname="test" label="field"></efield>
</form>
我使用指令包装字段html和angular的验证指令以减少样板代码。 问题是,即使在输入字段上设置了data-ng-required ='false',父div也获得了“ form-group has error”类,而不仅仅是“ form-group”。 我在这里做错了什么?
由于在指令中创建了孤立的作用域,因此您遇到了问题。 有几种方法可以解决它。 这是一个将删除孤立范围并使用template:function(elem,attrs)
.directive('efield', function () {
return {
restrict: 'E',
template: function (elem, attrs) {
return "<div data-ng-class=\"" + attrs.form + "." + attrs.fname + ".$valid ? 'form-group' : 'form-group has-error'\">" +
"<label class='control-label' for='" + attrs.fname + "'>" + attrs.label + "</label>" +
"<input type='text' class='form-control' name='" + attrs.fname + "' data-ng-required='false' data-ng-model='Form.test'>" +
"</div>"
}
});
现在范围将是父范围的范围
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.