我试图创建一个只接受数字或十进制数字的指令,具体取决于我在输入中插入的属性,我遇到的问题是小数位声明。
例:
如果用户只有此输入的内容接受int数,则可能是
<input only-number type-num="int">
如果用户只想输入小数位,
<input only-number type-num="decimal" maxDecimalPoints="2">
但是现在我必须$ observe typeNum和MaxDecimalPoints,我可以将$ observe彼此嵌套吗?我该如何完成?
这是我的指令:
angular.module('app')
.directive('onlyNumber', function(){
return {
require: '?ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
if(!ngModelCtrl) {
return;
}
// Only Int Numbers
attrs.$observe('typeNum', function(value){
if(value == "int"){
ngModelCtrl.$parsers.push(function(val) {
if (angular.isUndefined(val)) {
var val = '';
}
var clean = val.replace( /[^0-9]+/g, '');
if (val !== clean) {
ngModelCtrl.$setViewValue(clean);
ngModelCtrl.$render();
}
return parseInt(clean);
});
}
});
// Only Decimal
attrs.$observe('typeNum', function(value){
if(value == "decimal"){
// Now Check limit of decimal places
}
});
element.bind('keypress', function(event) {
if(event.keyCode === 32) {
event.preventDefault();
}
});
}
};
});
最佳答案
var parser;
attrs.$observe('typeNum', function (typeNum) {
if (parser) {
ngModelCtrl.$parsers.splice(ngModelCtrl.$parsers.indexOf(parser), 1);
}
switch (typeNum) {
case 'int':
parser = intParser;
break;
case 'decimal':
parser = decimalParser;
break;
default:
return;
}
ngModelCtrl.$parsers.push(parser);
});
// define intParser and decimalParser here
顺便说一句,请始终向
parseInt
或you’re in for big trouble添加一个基数参数:parseInt(clean, 10)
关于javascript - 指令中有多个$ observe,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38356478/