Angular指令：只允许数字

Question

这是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。现在，除了键入波斯数字的光标位置外，每件事都很好。当我键入一个波斯数字时，它被替换为英文等效数字，但光标突然跳到最后。

Answer 1

好 ！看看你的要求我已经采取了自由并编写了更多的定制指令。

这是同样的fiddle

问题

您引用并对给定指令进行更改的示例导致了该问题。

1. 你的$ scope变量名在HTML / JS中是错误的（$ scope.myNnumber1 = 1; $ scope.myNnumber2 = 1;在JS和HTML中它是ng-model =“myNumber1”）
2. 您正在访问element ng-model并尝试通过指令修改它，这是不好的做法，也是指令不工作的根本原因。因为您没有更改ng-model值，而是修改了角度无法识别的HTML元素值。
3. 为了性能起见，在指令中使用$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的更多信息

Answer 2

我终于使用了以下指令。该指令转换波斯数，不要在文本框中输入任何数字。特别感谢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;
            });
        }
    };
});