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

키보드에서 값을 얻을하고 각도에서 그것을 설정해야하므로, 입력 필드를 설정하지 않습니다 키보드 컨트롤러와 당신의 범위에 바인딩 변경 :

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