angularJS 报错: [ngModel:numfmt] http://errors.angularjs.org/1.4.1/ngModel/numfmt?p0=333

<!doctype html>
<html ng-app="a10086">
<head>
    <meta charset="utf-8">
    <script src="angular.min.js"></script>
</head>
<body>

<pre>
stringToNumber2 指令中这么写没问题,
但是html中调用也这么写,html解析会自动将标签和标签属性专为小写,即stringToNumber2变成了stringtonumber2,
导致最终:Error: ngModel:numfmt Model is not of type `number`。。产生的原因:不是你指令内写错了,而是指令(驼峰书写)与html中调用的指令名称(小写)不相同
若html中调用指令改成:string-to-number2就可以了。。ng好变态。
</pre>
<div ng-controller="kkc">
 <input type="date"/>
 正确的<input type="number" string-to-number ng-model="cc.a"/> {{ cc.a }}
 错误的:<input type="number" stringToNumber2 ng-model="cc.b"/> {{ cc.b }}

</div>

</body>
</html>
<script>

angular.module('a10086',[])
.controller('kkc',function($scope){
    $scope.cc={
        a:'222',b:'333'
    }//虽然这里后台给出的a和b是字符串,但是指令会专为数字。
}).directive('stringToNumber', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            ngModel.$parsers.push(function(value) {
                return '' + value;
            });
            ngModel.$formatters.push(function(value) {
                return parseInt(value);
            });
        }
    };
}).directive('stringToNumber2', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            ngModel.$parsers.push(function(value) {
                return '' + value;
            });
            ngModel.$formatters.push(function(value) {
                return parseInt(value);
            });
        }
    };
});
</script>

 AngularJS v1.4.1

input type="number":原因是在ipad上需要调用数字键盘,所以需要用这个,若type="text"则是不会报错了;根据提示信息将数据
$scope.cc={
        a:'222',b:'333'
    }改成cc.a=222,cc.b=333方可不报错,但因为该数据是从后台过来的,所以需要进行处理,故使用指令解决。。
但是依然报错,后来找到原因是指令大小写的问题:stringToNumber2,而html中写为stringToNumber2,看似一样其实不一样,因为浏览器在解析页面标签属性时会将其变成小写stringtonumber2,故“333”就没有解析成功,看指令:stringToNumber,在html中调用指令使用2中方式:1为string-to-number,2指令直接小写得了。。
原文地址:https://www.cnblogs.com/yuzhongwusan/p/4645670.html