Validation Angular自定义验证程序指令破坏其他指令
我正在尝试为输入字段构建一个指令,该指令使用从外部作用域传递的自定义函数进行验证,例如: HTML: 我已经为此创建了一个详细的plunker: 验证工作,但它似乎打破了与默认指令的关系,在这种情况下,ng disabled不起作用,我无法访问ng模型中使用的变量 这是我的指示:Validation Angular自定义验证程序指令破坏其他指令,validation,angularjs,angularjs-directive,Validation,Angularjs,Angularjs Directive,我正在尝试为输入字段构建一个指令,该指令使用从外部作用域传递的自定义函数进行验证,例如: HTML: 我已经为此创建了一个详细的plunker: 验证工作,但它似乎打破了与默认指令的关系,在这种情况下,ng disabled不起作用,我无法访问ng模型中使用的变量 这是我的指示: app.directive('customValidator', function() { return { require: "ngModel" , scope: { customVa
app.directive('customValidator', function() {
return {
require: "ngModel"
, scope: { customValidator: '='}
, link: function postLink(scope, elm, attrs, ctrl) {
var validator = function(value) {
if(scope.customValidator && scope.customValidator(value)) {
ctrl.$setValidity('custom-validator', true);
return value;
}
ctrl.$setValidity('custom-validator', false);
return undefined;
}
ctrl.$parsers.unshift(validator);
ctrl.$formatters.unshift(validator);
}
}
});
<input type="text" ... custom-validator="checkValidity(val)">
我不知道出了什么问题,我真的需要帮助
我应该继续使用Angular 1.0.7不使用
inputB
的原因是您正在通过指令创建一个新的作用域:
scope: { customValidator: '=' }
要使您的型号inputB
与inputA
保持在相同的范围内,您可以执行以下操作:
app.directive('customValidator', function() {
return {
require: "ngModel",
scope: false,
link: function postLink(scope, elm, attrs, ctrl) {
var validator = function(value) {
customValidator = scope[attrs["customValidator"]];
if(customValidator(value)) {
ctrl.$setValidity('custom-validator', true);
return value;
}
ctrl.$setValidity('custom-validator', false);
return undefined;
}
ctrl.$parsers.unshift(validator);
ctrl.$formatters.unshift(validator);
}
}
});
ng建模并隔离作用域,因此遵循@Codezilla的建议,不要创建新的作用域 但是,我建议使用$parse,它允许我们在HTML中明确指定我们正在向指令传递一个带有单个(命名)参数的函数:
app.directive('customValidator', function() {
return {
require: "ngModel"
, scope: { customValidator: '='}
, link: function postLink(scope, elm, attrs, ctrl) {
var validator = function(value) {
if(scope.customValidator && scope.customValidator(value)) {
ctrl.$setValidity('custom-validator', true);
return value;
}
ctrl.$setValidity('custom-validator', false);
return undefined;
}
ctrl.$parsers.unshift(validator);
ctrl.$formatters.unshift(validator);
}
}
});
<input type="text" ... custom-validator="checkValidity(val)">
它可以工作,但我无法传递自定义函数。在我的例子中,我必须为3个表单输入使用3个不同的函数。我尝试了
transclude:true
,但似乎无法解决这个问题…@destegabry看看我更新的指令,它使用了attrs
+1,但我认为使用$parse有点干净(见我的答案)。@MarkRajcok我完全同意你的看法+1 :)
app.directive('customValidator', function($parse) {
return {
require: "ngModel",
//scope: false,
link: function postLink(scope, elm, attrs, ctrl) {
var validationFn = $parse(attrs.customValidator);
var validator = function(value) {
if(validationFn(scope, {val: value})) {
ctrl.$setValidity('custom-validator', true);
return value;
}
ctrl.$setValidity('custom-validator', false);
return undefined;
}
ctrl.$parsers.unshift(validator);
ctrl.$formatters.unshift(validator);
}
}
});