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

发表于2015-07-15 15:53:38| 1301次阅读| 来源webkfa| 作者js,javascript

摘要：stringToNumber2 指令中这么写没问题，但是html中调用也这么写,html解析会自动将标签和标签属性专为小写，即stringToNumber2变成了stringtonumber2，导致最终：Error: ngModel:numfmt Model is not of ty...

01<!doctype html>
02<html ng-app="a10086">
03<head>
04    <meta charset="utf-8">
05    <script src="angular.min.js"></script>
06</head>
07<body>
08 
09<pre>
10stringToNumber2 指令中这么写没问题，
11但是html中调用也这么写,html解析会自动将标签和标签属性专为小写，即stringToNumber2变成了stringtonumber2，
12导致最终：Error: ngModel:numfmt Model is not of type `number`。。产生的原因：不是你指令内写错了，而是指令(驼峰书写)与html中调用的指令名称(小写)不相同
13若html中调用指令改成：string-to-number2就可以了。。ng好变态。
14</pre>
15<div ng-controller="kkc">
16 <input type="date"/>
17 正确的<input type="number" string-to-number ng-model="cc.a"/> {{ cc.a }}
18 错误的：<input type="number" stringToNumber2 ng-model="cc.b"/> {{ cc.b }}
19 
20</div>
21 
22</body>
23</html>
24<script>
25 
26angular.module('a10086',[])
27.controller('kkc',function($scope){
28    $scope.cc={
29        a:'222',b:'333'
30    }//虽然这里后台给出的a和b是字符串，但是指令会专为数字。
31}).directive('stringToNumber', function() {
32    return {
33        require: 'ngModel',
34        link: function(scope, element, attrs, ngModel) {
35            ngModel.$parsers.push(function(value) {
36                return '' + value;
37            });
38            ngModel.$formatters.push(function(value) {
39                return parseInt(value);
40            });
41        }
42    };
43}).directive('stringToNumber2', function() {
44    return {
45        require: 'ngModel',
46        link: function(scope, element, attrs, ngModel) {
47            ngModel.$parsers.push(function(value) {
48                return '' + value;
49            });
50            ngModel.$formatters.push(function(value) {
51                return parseInt(value);
52            });
53        }
54    };
55});
56</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指令直接小写得了。。

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

发表于2015-07-15 15:53:38| 1301次阅读| 来源webkfa| 作者js,javascript

相关文章

最新发布

阅读排行

热门文章

猜你喜欢