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

时间:2021-11-20 12:12:32
<!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指令直接小写得了。。