Edited at

AngularJSのng-modelで日本語入力の確定に悩まないDirective

More than 3 years have passed since last update.


はじめに

AngularJSの1.2.1移行のバージョンになると、IMEの入力確定までng-modelが更新されない仕様になって、日本語の環境だと非常に使いづらくなってしまった。


回避策としては


  • 自分でng-model相当のDirectiveを作る

  • DOMに更新イベントが起きなくなっているタイミングを回避させるイベントを挿入する

自分でng-model相当の機能を実装すると、今後のアップデートとかに対応したりするのがかなり高コストそうなので、なんとかDirectiveを使って回避してみようとしてみた。


回避方法

以下の方法を参考にして、Directive化してみる。


http://pirosikick.hateblo.jp/entry/2014/10/16/232409


わざわざrunのタイミングではなくDirectiveにしたのは主に以下の理由


  • runだと全てのコードに適用されてしまう

  • Directive化してpriorityを設定する事で、イベントの影響範囲を狭くできる

  • 今動いてるコードのバージョンアップするのにいちいちコードの書き換えを色々したくなかったので、Directive化して必要なとこだけに突っ込みたかった

使い方は以下のjp-inputというDirectiveを必要なinput要素に突っ込むだけ


input.html

<input type="text" ng-model="hoge" jp-input>



directive.js

// directive

.directive('jpInput', ['$parse', function($parse) {
return {
priority: 2,
restrict: 'A',
compile: function(element) {
element.on('compositionstart', function(e) {
e.stopImmediatePropagation();
});
},
};
}]);


サンプルコード全体

https://github.com/koh110/jpinput_test/blob/master/jpinput.html


まとめ

AngularJSのバージョンアップ対応する時のネックになっていた箇所が割りと簡単に回避できるようになったので、日本語環境では重宝しそうな気がしてます。