AngularJSでngModelをinputに付けたときに日本語入力がリアルタイムで反映されない問題

  • 22
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。
<input ng-model="hoge" type="text">
<h1>{{hoge}}</h1>

上みたいにソースを書き,実際にテキスト入力をするとき,日本語入力を確定しないとmodelに反映されない問題がある.
angularjsの1.2.7以上のバージョンで確認できる.
Angularjs公式の最初のサンプルでも確認することができる.
Win8.1+MicrosoftIME環境,ブラウザはIE,Firefox,Chromeで確認.

とりあえず以下の用なdirectiveを作成してngModelの代わりに使うと回避できる.

app.directive('jpNgModel', function($parse){
    return {
        restrict:'A',
        link:function(scope, element, attrs){
            var getter = $parse(attrs.jpNgModel);
            var setter = getter.assign;
            var value = getter(scope);
            element.bind('input', function(){
                setter(scope, element.val());
                scope.$apply();
            });

            scope.$watch(attrs.jpNgModel, function(n){
                if(n !== element.val()){
                    element.val(n);
                }
            });
        }
    }
});

使用例

<input jp-ng-model="hoge" type="text">
<h1>{{hoge}}</h1>