你的位置:首页 > 网页设计

[网页设计]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指令直接小写得了。。