码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-07-14 17:03:27      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:

<!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指令直接小写得了。。

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

标签:

原文地址:http://www.cnblogs.com/yuzhongwusan/p/4645670.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!