Mottie - JQuery仮想キーボードがAngularJSにバインドしない

Question

Mottie's Virtual KeyboardをAngularJSに使用しようとしています。ここにはexample on JSFiddleがあります。

結果は、キーボードからの入力がコントローラにバインドされていないことが判明しました。どのようにこれを修正するための任意のアイデア？

HTMLコード：

<div id="wrap" ng-controller="myController"> 
    <label>First Name</label> 
    <input type="text" ng-model="myController.firstName" 
      placeholder="Input first name here" /> 
    <label>Last Name</label> 
    <input id="keyboard" type="text" ng-model="myController.lastName" 
      placeholder="input last name here" /> 
    <br/><br/>   
    <div style="height:100px; background-color:yellow"> 
     {{myController.firstName}} 
    </div> 
    <div style="height:100px; background-color:lightblue"> 
     {{myController.lastName}} 
    </div> 
</div> 

JSコード：

angular.module('portal', []).controller('myController', 
    function ($scope) { 
     $('#keyboard').keyboard({ 
      visible: function(e, keyboard, el) { 
        keyboard.$preview[0].select(); 
      } 
     } 
    ); 
}); 

Answer 1

あなたは、キーボードから値を取得し、あなたの角度でそれを設定する必要がありますので、INPUTフィールドを設定していないキーボードコントローラと、あなたがスコープに結合変更：

JS：

angular.module('portal', []).controller('myController', 
    function ($scope) { 
     $('#keyboard').keyboard({ 
      visible: function(e, keyboard, el) { 
        keyboard.$preview[0].select(); 
      }, 
      beforeClose: function(e, keyboard, el, accepted) { 
        this.lastName = this.value; 
        $scope.$apply(); 
         }, 
     } 
    ); 
}); 

HTML：

<div id="wrap" ng-controller="myController"> 
    <label>First Name</label> 
    <input type="text" ng-model="firstName" 
      placeholder="Input first name here" /> 
    <label>Last Name</label> 
    <input id="keyboard" type="text" ng-model="lastName" 
      placeholder="input last name here" /> 
    <br/><br/>   
    <div style="height:100px; background-color:yellow"> 
     {{firstName}} 
    </div> 
    <div style="height:100px; background-color:lightblue"> 
     {{lastName}} 
    </div> 
</div> 

jsfiddle：http://jsfiddle.net/groov/8z2scgLo/

あなたは角度バリアントをチェックアウトする場合があります、https://github.com/antonio-spinelli/ng-virtual-keyboard