我正在为需要屏幕键盘的触摸屏计算机构建网络应用程序,并尝试使用这个出色的(或者至少是我能找到的唯一一个还不错的)键盘。 https://github.com/Mottie/Keyboard/
问题是,正如您可能已经猜到的那样,使用屏幕键盘时模型不会更新。这是我的代码,它可以工作,但有点丑陋:
部分 HTML:
<input type="text" class="keyboard" ng-model="newUser.name">
<input type="text" class="keyboard" ng-model="newUser.email>
从部分页面 Controller 初始化键盘:
$('.keyboard')
.keyboard({
stickyShift: false,
usePreview: false,
autoAccept: true,
change: function(e, kb, el) {
$scope.newUser.name = el.value;
}
});
因此,在 jQuery 插件触发的更改上,我可以运行一些东西。显然,这只适用于更新单个字段/模型,名称一(而电子邮件一根本不起作用并且会覆盖名称字段),我需要在与键盘一起使用时更新任意数量的字段,以及正确的一个。我如何以不那么糟糕、不硬编码(如果可能且不太复杂)的方式解决这个问题?
最佳答案
在 Angular 中写这个的方法是实际写一个指令。您可以将指令与特定的类名相关联。
所以,你的指令看起来像
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);
}
});
}
};
});
现在,如果任何元素同时定义了键盘类和 ng-Model,您的键盘应该会弹出。希望这会有所帮助。
关于javascript - 使用 "on change"回调从 jQuery 插件更新 AngularJS 模型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15547152/