JQuery虚拟键盘不绑定AngularJS

Question

我正在尝试使用motie 's Virtual Keyboard与AngularJS，这里是在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字段，所以你需要从键盘中获取值，并在Angular控制器中设置它，并将绑定更改为作用域:

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/

你可能想要检出Angular的变体https://github.com/antonio-spinelli/ng-virtual-keyboard