Angular自定义指令（一）：只能输入数字的输入框

实际项目中，我们经常会遇到输入框只能输入整数这个需求，实现这个方式有很多种，比如对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。