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