如何支持数字和文本指令以及输入？答案

【问题标题】：How to support directive for number and text as well for input?如何支持数字和文本指令以及输入？
【发布时间】：2017-04-11 11:44:00
【问题描述】：

我有一个指令来检查输入值是否为数字并根据执行操作

myApp.directive('numbersOnly', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attr, ngModelCtrl) {
                function fromUser(text) {

                    if (text) {
                        var transformedInput = text.replace(/[^0-9-]/g, '');
                        if (transformedInput !== text) {
                            ngModelCtrl.$setViewValue(transformedInput);
                            ngModelCtrl.$render();
                        }
                        return transformedInput;
                    }
                    return undefined;
                }
                ngModelCtrl.$parsers.push(fromUser);
            }
        };
    });

当我使用<input type="text"/> 时，上面的代码将起作用，但是当我使用<input type="number"/> 时，上面的代码将停止工作。

请告诉我如何支持两者？

【问题讨论】：

是的，因为.replace 是strings 的方法
你能创建一个简单的小提琴吗？
您处理的是数字而不是字符串。当浏览器已经过滤掉非数字字符时，为什么你首先需要这个？
@charlietfl 我必须同时处理数字/字符串在这种情况下将是什么解决方案
你想达到什么目的？请注意，如果您使用input type="number"，则除数字以外的唯一允许值是+,-,.,e,E

标签： angularjs angularjs-directive directive

【解决方案1】：

你能试试下面的代码，它在'if'中还有一个条件（isNaN），如下所示，

myApp.directive('numbersOnly', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attr, ngModelCtrl) {
            function fromUser(text) {

                if (text && isNaN(text)) {
                    var transformedInput = text.replace(/[^0-9-]/g, '');
                    if (transformedInput !== text) {
                        ngModelCtrl.$setViewValue(transformedInput);
                        ngModelCtrl.$render();
                    }
                    return transformedInput;
                }
                return undefined;
            }
            ngModelCtrl.$parsers.push(fromUser);
        }
    };
});

【讨论】：

假设如果数字来了，如何使用这个代码以及数字。

【解决方案2】：

下面的代码解决了我的问题

myapp.directive('numbersOnly', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attr, ngModelCtrl) {
                function fromUser(value) {
                    if (value) {
                        if(!isNaN(value)){
                        var text = value.toString();
                      }
                      else{
                        var text = value;
                      }
                        var transformedInput = text.replace(/[^0-9-]/g, '');
                        if (transformedInput !== text) {
                            ngModelCtrl.$setViewValue(transformedInput);
                            ngModelCtrl.$render();
                        }
                        return transformedInput;
                    }
                    return undefined;
                }
                ngModelCtrl.$parsers.push(fromUser);
            }
        };
    });

所以这段代码适用于这两种情况 <input type="text"/> 或 <input /> 以及 <input type="number"/>

【讨论】：