实际项目中，我们经常会遇到输入框只能输入整数这个需求，实现这个方式有很多种，比如对keydown事件监听，限制输入，或者是在onchange方法中写一个正则替换掉用户的非法输入。在angular项目中，我们完全可以将这个
input封装成一个自定义指令，以达到代码复用的效果。
知识准备
如果你对angular自定义指令一点概念也没有的话，最好读完angularJs高级程序设计15，16，17章后再来看这篇文章，当然本文也会对里面的代码做一个大致的介绍。
需求实现
首先直接上代码：
angular.module('app').directive('numberic', function () {
return {
require: 'ngModel',
restrict: "EA",
scope: {
max: '@',
maxLength: '@',
min: '@'
},
link: function (scope, ele, attrs, modelCtrl) {
modelCtrl.$parsers.push(function (inputValue) {
if (inputValue == undefined) {
return '';
}
var max = +scope.max;
var maxLength = +scope.maxLength;
var min = +scope.min;
var transformedInput = inputValue.replace(/[^^\d+(\.\d)?$]/g, '');
if (maxLength && inputValue.length > maxLength) {
transformedInput = inputValue.slice(0, maxLength);
}
if (max && +transformedInput > max) {
transformedInput = max + '';
}
if (min && +transformedInput < min) {
transformedInput = min + '';
}
if (transformedInput != inputValue) {
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
}
return transformedInput;
})
}
}
});
知识点解析
require：'ngModel'
这个自定义指令依赖ngModel这个控制器。
modelCtrl.$parsers.push(function (inputValue) {...}
modelCtrl是ngModel这个控制器，ngModel对于值有两个重要的概念叫modelValue，和viewValue。 从名字可以看出，model层的是modelValue，而viewvalue是视图层的数据，就是展示在页面上的，2个可以不相等。
ngModel控制器的方法：
- ctrl.$formatters 格式化链 ngModel 的 ModelValue to ViewVlaue过程中需要有序执行的一串 function，比如扩展格式化：日期、金额格式化；校验：假如modelValue不合法、则不会展示到前端。
- ctrl.$parsers 解析链 ngModel 的 ViewValue to ModelValue过程中需要执行的一串function同样在 反格式化的处理：金额去除￥符号转为数字；校验不合法的数据无法提交给ModelView。
- ctrl.$render 当视图需要更新时执行。
代码逻辑
首先我们定义了一个numberic指令，依赖于ng-model指令的控制器，接收三个单向绑定的参数。链接函数中主要重写了ngmodel控制器的$parsers方法，这个方法在视图层value转换到model层value时执行。然后我们使用正则替换掉用户的输入，并将结果赋值给视图层，赋值完以后并没有结束，我们还要执行一次render方法，将viewvalue同步到视图上。所以整体上来看还是比较简单的，难点主要在于angular。
网友评论