javascript - Angular Directive(指令) : Allow just numbers

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;
                }
            });
        }
   };

更新:请考虑我需要做一些处理来转换非英文数字等。我创建了 a new fiddle here基于 Angular_10 的回答。现在，除了输入波斯数字时的光标位置外，一切都很好。当我输入波斯语数字时，它被替换为等效的英语数字，但光标突然跳到末尾。

Answer 1

好的!查看您的要求，我自由地编写了更多自定义指令。

这是 fiddle同样的

问题

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

1. 您的 $scope 变量名在 HTML/JS 中是错误的 ($scope.myNnumber1 = 1;$scope.myNnumber2 = 1;在 JS 和 HTML 中是 ng-model="myNumber1")
2. 您正在访问 element ng-model 并尝试通过指令修改它，这是不好的做法，也是指令不起作用的根本原因。因为您没有更改 ng -model 值，但反过来修改 Angular 无法识别的 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 通信时，我们可以在链接函数中将 Controller 作为 4 参数传递。从该 Ctrl 参数，我们可以修改/查看 Controller 范围内的内容。

使用一些基本的正则表达式找出输入的内容并将其设置在 Controller 范围对象 View 值中。

ctrl.$setViewValue(numeric); //to set the value in the respective ngModdel
ctrl.$render(); //to display the changed value

更多关于 $setViewValue