这是a sample angular directive to prevent typing non-numeric keys (StackOverflow answer)。我想写一些类似this fiddle的东西,在几个输入中使用is-number指令。请注意,因为我的输入中有各种不同的指令,所以我不能使用上述答案更新中建议的相同模板。
var $scope;
var app = angular.module('myapp', []);
app.controller('Ctrl', function($scope) {
$scope.myNnumber1 = 1;
$scope.myNnumber2 = 1;
});
app.directive('isNumber', function () {
return {
require: 'ngModel',
link: function (scope, element) {
scope.$watch(element.ngModel, function(newValue,oldValue) {
newValue = String(newValue);
newValue = newValue.replace('۰', '0').replace('۱', '1').replace('۲', '2').replace('۳', '3').replace('۴', '4').replace('۵', '5').replace('۶', '6').replace('۷', '7').replace('۸', '8').replace('۹', '9');
var arr = String(newValue).split("");
if (arr.length === 0) return;
if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.' )) return;
if (arr.length === 2 && newValue === '-.') return;
if (isNaN(newValue)) {
element.ngModel = oldValue;
}
});
}
};
更新:请考虑我需要做一些流程来转换非英语数字等。我根据Angular_10的答案创建了a new fiddle here。现在,除了键入波斯数字的光标位置外,每件事都很好。当我键入一个波斯数字时,它被替换为英文等效数字,但光标突然跳到最后。
好 !看看你的要求我已经采取了自由并编写了更多的定制指令。
这是同样的fiddle
问题
您引用并对给定指令进行更改的示例导致了该问题。
element ng-model
并尝试通过指令修改它,这是不好的做法,也是指令不工作的根本原因。因为您没有更改ng-model
值,而是修改了角度无法识别的HTML元素值。$watch
并不总是更好。解
app.directive('isNumber', function() {
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, element, attr, ctrl) {
function inputValue(val) {
if (val) {
var numeric = val.replace(/[^- 0-9]/g, '');
if (numeric !== val) {
ctrl.$setViewValue(numeric );
ctrl.$render();
}
return numeric;
}
return undefined;
}
ctrl.$parsers.push(inputValue);
}
};
});
当指令需要控制器通信时,我们可以在链接函数中将Controller作为4个参数传递。从Ctrl参数中我们可以修改/查看控制器范围内的事物。
使用一些基本的正则表达式来找出输入的输入是什么,并将其设置在控制器范围对象视图值中。
ctrl.$setViewValue(numeric); //to set the value in the respective ngModdel
ctrl.$render(); //to display the changed value
关于$setViewValue的更多信息
我终于使用了以下指令。该指令转换波斯数,不要在文本框中输入任何数字。特别感谢Angular_10。我为他的帮助奖励了50美元。
app.directive('fixPersianAndNoNumberInput', function ($filter) {
return {
require: 'ngModel',
restrict: 'EA',
link: function (scope, element, attr, controller) {
function inputValue(val) {
if (val) {
let numeric = parseInt(String(val).replace('۰', '0').replace('۱', '1').replace('۲', '2').replace('۳', '3').replace('۴', '4').replace('۵', '5').replace('۶', '6').replace('۷', '7').replace('۸', '8').replace('۹', '9').replace(' ', '000').replace(/[^- 0-9]/g, ''));
if (numeric !== val) {
controller.$setViewValue(numeric);
controller.$render();
let value;
let updateOn, debounce;
if (controller.$options) {
if (controller.$options.getOption) {
updateOn = controller.$options.getOption('updateOn');
debounce = controller.$options.getOption('debounce');
} else {
updateOn = controller.$options.updateOn;
debounce = controller.$options.debounce;
}
}
if (updateOn === 'blur' || debounce) {
value = controller.$viewValue;
for (let i = controller.$parsers.length - 1; i >= 0; i--) {
value = controller.$parsers[i](value);
}
} else {
value = controller.$$rawModelValue;
}
for (let j = controller.$formatters.length - 1; j >= 0; j--) {
value = controller.$formatters[j](value);
}
controller.$viewValue = value;
controller.$render();
}
return numeric;
}
return undefined;
}
controller.$parsers.push(inputValue);
controller.$formatters.push((value) => {
if ([undefined, null, ''].indexOf(value) === -1) {
return $filter('currency')(value, '', 0);
}
return value;
});
}
};
});