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