8

私は、オンスクリーンキーボードを必要とするタッチスクリーンコンピューター用のWebアプリを構築しており、この優れた（または、ひどいものではなかったことがわかった唯一の）キーボードを使用しようとしています。 https://github.com/Mottie/Keyboard/

問題は、すでにお察しのとおり、オンスクリーンキーボードを使用してもモデルが更新されないことです。これは私のコードです。これは一種の機能ですが、あらゆる種類の醜いものです。

部分的なHTML：

<input type="text" class="keyboard" ng-model="newUser.name">
<input type="text" class="keyboard" ng-model="newUser.email>

部分的なページコントローラからのキーボードの初期化：

$('.keyboard')
.keyboard({
    stickyShift: false,
    usePreview: false,
    autoAccept: true,

    change: function(e, kb, el) {
        $scope.newUser.name = el.value;
    }
});

したがって、jQueryプラグインによってトリガーされた変更で、何かを実行できます。明らかに、これは単一のフィールド/モデル、名前1（電子メールのものはまったく機能せず、名前フィールドを上書きします）の更新でのみ機能します。キーボードで使用する場合は、任意の数のフィールドを更新する必要があります。正しいもの。これをそれほどひどくなく、ハードコーディングされていない（可能であれば、複雑すぎない）方法でこれを解決するにはどうすればよいですか？

4

2 に答える 2

12

これをAngularで書く方法は、実際にディレクティブを書くことです。ディレクティブを特定のクラス名に関連付けることができます。

したがって、ディレクティブは次のようになります

app.directive('keyboard',function(){
  return {
    require : '?ngModel',
    restrict : 'C',
    link : function(scope,element,attrs,ngModelCtrl){
      if(!ngModelCtrl){
        return;
      }
      $(element).keyboard({
        stickyShift: false,
        usePreview: false,
        autoAccept: true,

        change: function(e, kb, el) {
            ngModelCtrl.$setViewValue(el.value);
        }
    });
    }
  };
});

これで、いずれかの要素にキーボードのクラスとng-Modelの両方が定義されている場合、キーボードがポップアップするはずです。お役に立てれば。

于 2013-03-21T12:23:43.153 に答える
2

ganrajディレクティブを変更しました。これで、キーボードボタンをクリックするたびにモデルが更新されます。

app.directive('keyboard',function(){
  return {
    require : '?ngModel',
    restrict : 'C',
    link : function(scope,element,attrs,ngModelCtrl){
      if(!ngModelCtrl){
        return;
      }

      $(element).keyboard({
        stickyShift: false,
        usePreview: false,
        autoAccept: true,

        change: function(e, kb, el) {
            if(!scope.$$phase && !scope.$root.$$phase)
            {
                scope.$apply(function(){
                    ngModelCtrl.$setViewValue(el.value);
                }); 
            }
        }
    });
    }
  };
});
于 2013-09-06T13:28:30.023 に答える