Question

我正在尝试将Mottie's Virtual Keyboard与AngularJS一起使用，这里是example on JSFiddle。

结果表明键盘的输入没有绑定到控制器。知道如何解决这个问题吗？

HTML code：

<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

Mottie - JQuery虚拟键盘不绑定AngularJS

1 个答案: