angularjs组件之input mask

　　最近项目中经常有一些对input输入进行格式化的需求，以前做的时候在js中写指令进行处理，但是这样又要在js或者在java代码中将请求的数据进行还原，很是麻烦，于是在网上看到了jquery的inputmask组件，觉得很好用，在项目中写出指令，用起来很方便。

　　在项目中引入jquery和jquery-inputmask，然后在项目中写指令，如下：

define(['./module'], function (directives) {
    'use strict';
    directives.directive('inputMask', function ($timeout) {
        return {
            restrict: 'EA',
            require: 'ngModel',
            link: function (scope, elm, attrs, ngModel) {
                var applyModelEvents = [ "oncomplete", "onKeyUp", "onKeyValidation" ], maskType = "mask";

                if (attrs.formatOption) {
                    var formatOption = scope.$eval(attrs.formatOption);
                    if (formatOption.parser) {
                        ngModel.$parsers.push(formatOption.parser);
                    }

                    if (formatOption.formatter) {
                        ngModel.$formatters.push(formatOption.formatter);
                    }

                    if (formatOption.isEmpty) {
                        ngModel.$isEmpty = formatOption.isEmpty;
                    }
                }

                var applyModel = function (fun) {
                    return function () {
                        (function (args) {
                            $timeout(function () {
                                var viewValue = elm.inputmask('unmaskedvalue');
                                if (viewValue !== ngModel.$viewValue) {
                                    ngModel.$setViewValue(viewValue);
                                }
                                if (fun) {
                                    fun.apply(scope, args);
                                }
                            });
                        })(Array.prototype.slice.call(arguments));
                    };
                };

                var extendOption = function (option) {
                    var newOption = angular.extend({}, option);
                    angular.forEach(applyModelEvents, function (key) {
                        newOption[key] = applyModel(newOption[key]);
                    });

                    return newOption;
                };

                if (attrs.inputMask) {
                    maskType = scope.$eval(attrs.inputMask);
                }

                if (maskType) {
                    if (angular.isObject(maskType)) {
                        var maskOption = extendOption(maskType);
                        $timeout(function () {
                            elm.inputmask(maskOption);
                        });
                    } else {
                        var maskOption = extendOption(scope.$eval(attrs.maskOption) || {});
                        $timeout(function () {
                            elm.inputmask(maskType, maskOption);
                        });
                    }
                }

                elm.bind("blur", function(){
                    $timeout(function () {
                        if(attrs.isMask){
                            
                        }else{
                            ngModel.$setViewValue(elm.inputmask('unmaskedvalue'));
                        }
                    });
                });

            }
        }
    });
});

　　如需要将银行卡号按银行卡格式显示：

　　html:

<input class="form-control" id="cardNo" name="cardNo" type="text" ng-model="cardNo" input-mask="cardOption"/>

　　angular controller中cardOption：

$scope.cardOption = {
                    mask: function () {
                        return ["9999 9999 9999 9999 [999]"];
                    }};

　　如果日期表示的时候，将string直接转为data类型：

$scope.dateFormatOption = {
                    parser: function (viewValue) {
                        return viewValue ? new Date(viewValue) : undefined;
                    },
                    formatter: function (modelValue) {
                        if (!modelValue) {
                            return "";
                        }
                        var date = new Date(modelValue);
                        return (date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate()).replace(/\b(\d)\b/g, "0$1");
                    },
                    isEmpty: function (modelValue) {
                        return !modelValue;
                    }
                };

　　html代码：

<input type="text" ng-model="test1" input-mask="'y-m-d'" format-option="dateFormatOption"/>

　　另外，指令中的一些属性需要注意：

　inputMask主要是制定页面展示的样式：如展示银行卡号的例子；
　format-option主要是指定在格式化的时候解析、格式化和为空的时候，数据的格式；如日期处理，最后进行请求的时候就是传入data类型；
　isMask主要是指定页面展示的是否是传入后台请求的数据，如卡号解析为XXXX XXXX XXXX XXXX，如果isMask为true则传入后台则为XXXX XXXX XXXX XXXX，否则为XXXXXXXXXXXXXXXX。
  maskOption:指定页面展示的样式，同时也可以用回调，在完成和验证的时候做一些处理动作。如下：

$scope.testoption = {
                "mask": "99-9999999",
                "oncomplete": function () {
                    console.log();
                    console.log(arguments,"oncomplete!this log form controler");
                },
                "onKeyValidation": function () {
                    console.log("onKeyValidation event happend! this log form controler");
                }
            }

参数博客：http://www.cnblogs.com/whitewolf/p/3475687.html