Angular中的input格式化（自動轉成大寫）

在ng的實際開發中，我們會遇到很多變態的需求（哈哈），這里主要是講解一下怎么格式化input輸入框的值：

1、HTML結構

<input input-uppercase ng-model="test" type="text" class="form-control">

2、編寫指令

var app = angular.module('myApp',[]);
app.directive("inputUppercase",function (debounce) {//注入寫好的服務
    return {
        require: "ngModel",
        restrict: "A",
        link: function (scope, elem, attrs, modelCtrl) {
            elem.on("keyup", debounce.debounce(function (event) {
                scope.$apply(function () {//scoep.$apply()這個函數是為了更新input中model的值
                    if (!angular.isUndefined(modelCtrl.$modelValue) && /[a-z]/.test(modelCtrl.$modelValue)) {
                        modelCtrl.$setViewValue(angular.uppercase(modelCtrl.$modelValue));
                        elem.val(modelCtrl.$modelValue);
                        console.log(modelCtrl.$viewValue)//主要是輸入英文字母，自動轉成大寫
                    }
                });
            }, 50))
        }
    }
})

3、上面的指令中，利用JS庫lodash.js，封裝了一個延時的服務，這個服務主要是為了間隔多少秒執行一次臟檢查，不然太耗性能了，就像我們用$scope.$watch()來監控某一個ngModel，如果不做延時處理，在大代碼量的情況下，會很可怕的。

app.service('debounce',function(){ //這個是延時執行檢查
    this.debounce = function (fun, wait) {
        if (angular.isUndefined(wait)){
            wait = 800;
        }
        return _.debounce(fun, wait);//lodash.js插件
    }
})

4、簡單講解一下ngModel的屬性，具體的自己去搗騰吧

$parsers 屬性，保存了從viewValue向modelValue綁定過程中的處理函數，它們將來會依次執行

$viewValue視圖的值

$modelValue模型里的值

$formatters 屬性，保存的是從modelValue向viewValue綁定過程中的處理函數

$setViewValue屬性，當view發生了某件事情時，從view向model綁定調用，把viewValue保存選來