javascript - ng-model 在 Angular 1.3 中的输入类型编号上抛出错误

Question

我有一个输入字段，我希望用户输入一个数字，所以我制作了一个类型为“数字”的输入字段。

当我在 1.2 中使用它时，我没有得到任何错误

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('MainCtrl', ['$scope', function ($scope) {
        $scope.person = [
            {"name": "Alex","pts": "10"}
        ];
    }]);
</script>
<div ng-app="app">
    <div ng-controller="MainCtrl">
        {{person | json }}<br>
        name: <span ng-bind="person[0].name"></span></br>
        <!-- pts: <input ng-model="person[0].pts"> -->
        pts: <input type="number" ng-model="person[0].pts"><br?
    </div>
</div>

http://codepen.io/anon/pen/dPKgVL

但是，当我在 1.3 中使用它时，出现错误:[ngModel:numfmt] 但是当我更新数字时，它似乎仍然绑定(bind)到范围。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('MainCtrl', ['$scope', function ($scope) {
        $scope.person = [
            {"name": "Alex","pts": "10"}
        ];
    }]);
</script>
<div ng-app="app">
    <div ng-controller="MainCtrl">
        {{person | json }}<br>
        name: <span ng-bind="person[0].name">
        name: <span ng-bind="person[0].name"></span></br>
        <!-- pts: <input ng-model="person[0].pts"> -->
        pts: <input type="number" ng-model="person[0].pts">
    </div>
</div>

http://codepen.io/anon/pen/YPvJro

我是不是做错了什么或者这没什么好担心的？当我尝试调试其他问题时，我不希望在我的控制台中出现错误

Answer 1

添加这个来解决问题:

myApp.directive('input', [function() {
    return {
        restrict: 'E',
        require: '?ngModel',
        link: function(scope, element, attrs, ngModel) {
            if (
                   'undefined' !== typeof attrs.type
                && 'number' === attrs.type
                && ngModel
            ) {
                ngModel.$formatters.push(function(modelValue) {
                    return Number(modelValue);
                });

                ngModel.$parsers.push(function(viewValue) {
                    return Number(viewValue);
                });
            }
        }
    }
}]);