如何限制Input框只能輸入數字？ 在Input里使用自定義指令 ~~~ <input type="text" ng-model="num" fdc-filter> ~~~ 然后在自定義指令的link標簽綁定element ，使用正則，只匹配數字 當keyup時，把輸入的不是數字的用空字符串替換掉： ~~~ link: function(scope,element){ var regex = /\D/g; element.on('keyup',function(){ this.value = this.value.replace(regex,''); }); } ~~~ 結果發現，我們輸入字母時，會出現閃一下然后消失的情況  然后消失：  原因是，我們按下按鈕時ui線程已經渲染了頁面，然后再執行了keyup事件，然后再替換掉，就會出現這種情況 然后換了一個事件：keydown 結果發現： ***** 如何把input text 限制只能輸入數字呢？ 首先我們在Input里加入自定義指令； ~~~ <input type="text" class="form-control" ng-model="vm.searchParams.id" number-filter> ~~~ 在number-filter指令里，我們使用require require表示需要依賴的指令；如果有依賴的指令，那么link的第四個參數也就是依賴指令的對外暴露的controller也自動會被注入進來 由于ng-model也是一個指令，所以我們可以把ng-model依賴注入到我們自己的自定義指令中： ~~~ .directive('numberFilter',[function () { return{ restrict:'AE', require:'ngModel', link:function (scope,element,attrs,ctrl) { } } }]); ~~~ 此時，link就有了第4個參數，第4個參數是用來把指令對外暴露的controller注入進來，因為我們使用的事ng-model,所以，這第4個參數就是ng-model的controller,注意，并不是當前頁面的controller,因為ng-model也是一個angular封裝好的自定義指令，它在內部有自己的controller,這個注入的controller是ng-model內部的controller, 然后這個controller有幾個方法：我們需要用到的是： $parsers:  就是說我們在input輸入值，然后會經過這個$parsers,最后傳到angular 的model層中， $setViewValue: $setViewValue用于設置視圖值(上面的例子就是將input的value值賦值給$viewValue) 這個用來設置視圖值，改變這里的值會直接反應到我們的視圖上，是我們能看到的值 $render:$render函數負責將模型值同步到視圖上， 如果模型值被改變,需要同步視圖的值。 好了，知道這幾個東西可以知道該怎么寫了： 首先我們在自定義指令中使用$parsers的方法 把我們從dom獲取的值進行轉換， 如果不是數字，我們把他轉換為空，然后angular，執行$parsers之后就會把轉換后的值加入model層中； ~~~ .directive('numberFilter',[function () { return{ restrict:'AE', require:'ngModel', link:function (scope,element,attrs,ctrl) { ctrl.$parsers.push(function(text){ var reg = /[^\d]/g, newText = text.replace(reg,'') }) } } }]); ~~~ 這里上面的text指的是我們input輸入的值，然后return就是輸出的值，就是輸出到model層的值； 然后我們使用正則把不是數字的變為空，這里的[^]表示邏輯非，\d，表示數字，意思//g就是全局匹配，整體意思是匹配出不是數字的，然后使用''空字符串代替掉， 然后我們需要把這個newText，return出去，此時model層里的值就會變成newText 但是，此時視圖層還沒有進行改變，所以我們要使用$setViewValue，立即更新視圖層，還有$render同步， ~~~ .directive('numberFilter',[function () { return{ restrict:'AE', require:'ngModel', link:function (scope,element,attrs,ctrl) { ctrl.$parsers.push(function(text){ var reg = /[^\d]/g, newText = text.replace(reg,'')； if(newText!== text){ ctrl.$setViewValue(outPut); ctrl.$render(); } return newText }) } } }]); ~~~ 最后把里面的函數抽取到外面去，在里面調用，就變成 ~~~ .directive('numberFilter',[function () { return{ restrict:'AE', require:'ngModel', link:function (scope,element,attrs,ctrl) { function formUser(text) { var reg = /[^\d]/g, outPut = text.replace(reg,''); if(outPut!== text){ ctrl.$setViewValue(outPut); ctrl.$render(); } return outPut } ctrl.$parsers.push(formUser) } } }]); ~~~