angularjs – 如何只允许在输入中键入数字(数字和小数点)？

app.directive('isNumber',function () {
    return {
        require: 'ngModel',link: function (scope) {    
            scope.$watch('wks.number',function(newValue,oldValue) {
                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)) {
                    scope.wks.number = oldValue;
                }
            });
        }
    };
});

它也解释了这些情况：

>从非空有效字符串转换为空字符串
>负值
>负十进制值

我在这里创建了一个jsFiddle，这样你可以看到它是如何工作的。

更新

以下Adam Thomas的反馈，不包括直接在指令内的模型引用(我也认为是最好的方法)，我更新了我的jsFiddle提供一个不依赖于这一点的方法。

该指令利用局部范围与父范围的双向绑定。对指令中的变量所做的更改将反映在父作用域中，反之亦然。

HTML：

<form ng-app="myapp" name="myform" novalidate> 
    <div ng-controller="Ctrl">
        <number-only-input input-value="wks.number" input-name="wks.name"/>
    </div>
</form>

角码：

var app = angular.module('myapp',[]);

app.controller('Ctrl',function($scope) {
    $scope.wks =  {number: 1,name: 'testing'};
});
app.directive('numberOnlyInput',function () {
    return {
        restrict: 'EA',template: '<input name="{{inputName}}" ng-model="inputValue" />',scope: {
            inputValue: '=',inputName: '='
        },link: function (scope) {
            scope.$watch('inputValue',oldValue) {
                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)) {
                    scope.inputValue = oldValue;
                }
            });
        }
    };
});