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

最新推荐文章于 2024-04-18 11:45:11 发布

转载最新推荐文章于 2024-04-18 11:45:11 发布 · 360 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yuzhongwusan/p/4645670.html

文章标签：

#javascript #ViewUI

本文探讨了在AngularJS中使用自定义指令时遇到的大小写敏感问题，特别是当指令名采用驼峰命名法时，HTML解析会自动转换为小写，导致指令识别错误。文章通过实例展示了如何正确调用指令避免此类错误。

部署运行你感兴趣的模型镜像

<!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

您可能感兴趣的与本文相关的镜像