Edited at

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

More than 5 years have passed since last update.

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