search
LoginSignup
20
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

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

<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>

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
20
Help us understand the problem. What are the problem?