AngularJS 摘要循环错误,在自定义验证时擦除 ngmodel
AngularJS digest cycle bug, ngmodel wiped on custom validation
作为 AngularJS 的新手,我在为下拉菜单编写自定义验证时遇到了一个非常奇怪的错误 selection。
如您所料,我用
编写了这个下拉菜单
<select name="somename" id="someid" ng-model="foo" ng-model-options="{allowInvalid: true}" validate-input>
<option></option>
<option></option>
</select>
在这种情况下,验证输入是我的自定义指令。是这样写的:
directives.directive("validateInput", function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, ele, attrs, ctrl) {
ctrl.$validators.isAcceptable = function (value) {
var status = false;
if (value === '0') {
status = true;
}
return status;
};
}
}
});
在这种情况下,isAcceptable 是我正在创建的标志。
无论如何,针对实际问题本身。每当我启动应用程序时,我发现 ng-model 的实际值为 'wiped'。也就是说,它要么是未知的,要么是 NaN(当然取决于输入)。为了解决这个问题,我在 select 标签中添加了以下指令:ng-model-options="{allowInvalid: true}
但是,这并没有解决我的问题。
这个问题如此严重的原因是,当 ng-model 被错误验证(设置为 NaN 或未知)擦除时,这会在我的应用程序中导致重大错误。我能想到的唯一解决方案是制作 ng-model="0" 或 =""(这是一个错误的验证)并保留这些值而不是从应用程序中擦除模型本身。
尝试这样的事情:
directives.directive("validateInput", function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, ele, attrs, ctrl) {
ctrl.$validators.isAcceptable = function (modelValue, viewValue) {
var value = modelValue || viewValue;
return value === '0' ? true : false;
};
}
}
});
modelValue
只有在 viewValue
满足验证条件后才会设置。所以在初始化时它是空白的,另一个验证器可能会阻止它设置一个值。
您可能完全想改用这种格式:
directives.directive("validateInput", function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, ele, attrs, ctrl) {
var setValidator = function (value) {
var isValidFormat = function () {
return $value === '0' ? true : false;
};
ctrl.$setValidity('isAcceptable', isValidFormat);
return value;
};
ctrl.$parsers.unshift(setValidator);
ctrl.$formatters.unshift(setValidator);
}
}
});
作为 AngularJS 的新手,我在为下拉菜单编写自定义验证时遇到了一个非常奇怪的错误 selection。
如您所料,我用
编写了这个下拉菜单<select name="somename" id="someid" ng-model="foo" ng-model-options="{allowInvalid: true}" validate-input>
<option></option>
<option></option>
</select>
在这种情况下,验证输入是我的自定义指令。是这样写的:
directives.directive("validateInput", function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, ele, attrs, ctrl) {
ctrl.$validators.isAcceptable = function (value) {
var status = false;
if (value === '0') {
status = true;
}
return status;
};
}
}
});
在这种情况下,isAcceptable 是我正在创建的标志。
无论如何,针对实际问题本身。每当我启动应用程序时,我发现 ng-model 的实际值为 'wiped'。也就是说,它要么是未知的,要么是 NaN(当然取决于输入)。为了解决这个问题,我在 select 标签中添加了以下指令:ng-model-options="{allowInvalid: true} 但是,这并没有解决我的问题。
这个问题如此严重的原因是,当 ng-model 被错误验证(设置为 NaN 或未知)擦除时,这会在我的应用程序中导致重大错误。我能想到的唯一解决方案是制作 ng-model="0" 或 =""(这是一个错误的验证)并保留这些值而不是从应用程序中擦除模型本身。
尝试这样的事情:
directives.directive("validateInput", function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, ele, attrs, ctrl) {
ctrl.$validators.isAcceptable = function (modelValue, viewValue) {
var value = modelValue || viewValue;
return value === '0' ? true : false;
};
}
}
});
modelValue
只有在 viewValue
满足验证条件后才会设置。所以在初始化时它是空白的,另一个验证器可能会阻止它设置一个值。
您可能完全想改用这种格式:
directives.directive("validateInput", function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, ele, attrs, ctrl) {
var setValidator = function (value) {
var isValidFormat = function () {
return $value === '0' ? true : false;
};
ctrl.$setValidity('isAcceptable', isValidFormat);
return value;
};
ctrl.$parsers.unshift(setValidator);
ctrl.$formatters.unshift(setValidator);
}
}
});