8

我正在为需要屏幕键盘的触摸屏计算机构建一个 Web 应用程序，并尝试使用这个出色的（或者至少是我能找到的唯一一个不可怕的）键盘。 https://github.com/Mottie/Keyboard/

问题是，正如您可能已经猜到的那样，使用屏幕键盘时模型没有得到更新。这是我的代码，它可以工作，但有点难看：

部分 HTML：

<input type="text" class="keyboard" ng-model="newUser.name">
<input type="text" class="keyboard" ng-model="newUser.email>

从部分页面控制器初始化键盘：

$('.keyboard')
.keyboard({
    stickyShift: false,
    usePreview: false,
    autoAccept: true,

    change: function(e, kb, el) {
        $scope.newUser.name = el.value;
    }
});

因此，在 jQuery 插件触发的更改上，我可以运行一些东西。显然，这只适用于更新单个字段/模型，名称一（而电子邮件一则根本不起作用，并且会覆盖名称字段），当与键盘一起使用时，我需要更新任意数量的字段，并且正确的一个。如何以不那么糟糕、不硬编码（如果可能且不太复杂）的方式解决这个问题？

4

2 回答 2

12

在 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 类，那么您的键盘应该会弹出。希望这可以帮助。

于 2013-03-21T12:23:43.153 回答
2

我修改了 ganraj 指令。现在模型在每次点击键盘按钮时都会更新。

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) {
            if(!scope.$$phase && !scope.$root.$$phase)
            {
                scope.$apply(function(){
                    ngModelCtrl.$setViewValue(el.value);
                }); 
            }
        }
    });
    }
  };
});
于 2013-09-06T13:28:30.023 回答