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

はじめに

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();
          });
        },
      };
    }]);

サンプルコード全体

まとめ

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