「変更中」コールバック付きのjQueryプラグインからAngularJSモデルを更新

Question

私はオンスクリーンキーボードが必要なタッチスクリーンコンピュータ用のWebアプリケーションを構築しています。この優れた（または少なくとも唯一のもの私はそれがひどいことではないことが分かった）キーボード。 https://github.com/Mottie/Keyboard/

画面上のキーボードを使用しているときにモデルが更新されないという問題は、既に推測していることです。これは、作品の並べ替え私のコード、ですが、それ醜いのすべての種類：

partitial HTML：だから、上の

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

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

：

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

がpartitialページコントローラから、キーボードを初期化しますjQueryプラグインによってトリガされた変更は何か実行できます。明らかにこれは、単一のフィールド/モデル、名前の更新（電子メールは全く機能しないし、名前フィールドを上書きします）、キーボードで使用するときに更新するフィールドがいくつでも必要です。正しいもの。これを解決するにはどうすればよいでしょうか？

Answer 1

これをAngularで書く方法は、実際に指示文を書くことです。特定のクラス名のディレクティブをアセンブルすることができます。

任意の要素は、あなたのキーボードがポップアップをする必要があり、その後、定義されたキーボードのクラスとNG-モデルの両方を持っているのであれば、あなたのディレクティブは今

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); 
     } 
    }); 
    } 
    }; 
}); 

ようになります。お役に立てれば。

Answer 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); 
       }); 
      } 
     } 
    }); 
    } 
    }; 
});