以前作った JavaScript で Form の value に全角で入力された値を半角へ変換する関数を、AngularJS の Directive に書き換えてみた

JavaScript バージョン

inputタグ

<input name="phone" type="text" placeholder="09012345678" onchange="zen2han(this)">

zen2han.js

function zen2han(obj){
  // 文字列かチェック
  if(typeof(obj.value)!="string") return false;
  var word = obj.value;

  obj.value = word.replace(/[！＂＃＄％＆＇（）＊＋，－．／０-９：；＜＝＞？＠Ａ-Ｚ［＼］＾＿｀ａ-ｚ｛｜｝～]/g, function(s) {
      return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);    
  })
}

デモ

AngularJS Directive バージョン

inputタグ(ng-model無)

<input name="phone" type="text" placeholder="09012345678" convert-mb-to-ascii >

inputタグ(ng-model有)

<input name="phone" type="text" placeholder="09012345678" ng-model="phone" convert-mb-to-ascii >

app.js

angular
    .module('MyApp', [])
    // 英数字記号の全角文字を半角へ変換
    .directive('convertMbToAscii', function () {
        return {
            restrict: 'A',
            require: '?ngModel',
            link: function (scope, element, attrs, ngModel) {
                element.on('change', function(){
                    if(typeof(this.value)!="string") return false;
                    var word = this.value;
                    word = word.replace(/[！＂＃＄％＆＇（）＊＋，－．／０-９：；＜＝＞？＠Ａ-Ｚ［＼］＾＿｀ａ-ｚ｛｜｝～]/g, function(s) {
                        return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);    
                    });
                    // ng-model への反映(これがないとフォームの値だけ更新され、ng-modelの値は更新されない)
                    if (ngModel != null) {
                        scope.$apply(function() {
                            ngModel.$setViewValue(word);
                        });
                    }
                    this.value = word;
                });
            }
        };
    })

デモ

require を ngModel としてしまうと、下記のエラーが発生してしまうが、
必要ないので ?ngModel にして、発生しないようにしてます。
更に、同じタグに ng-model があった場合には、フォームの値だけでなく、ng-model の値も
更新するようにしてます。

Error: [$compile:ctreq] Controller 'ngModel', required by directive 'convertMbToAscii', can't be found!

参考
AngularJS Directive なんてこわくない（その４）

ついでに逆バージョンも用意してみました
AngularJS で半角から全角に変換する Directive を追加する