javascript - 使用 "on change"回调从 jQuery 插件更新 AngularJS 模型

Question

我正在为需要屏幕键盘的触摸屏计算机构建网络应用程序，并尝试使用这个出色的(或者至少是我能找到的唯一一个还不错的)键盘。 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 插件触发的更改上，我可以运行一些东西。显然，这只适用于更新单个字段/模型，名称一(而电子邮件一根本不起作用并且会覆盖名称字段)，我需要在与键盘一起使用时更新任意数量的字段，以及正确的一个。我如何以不那么糟糕、不硬编码(如果可能且不太复杂)的方式解决这个问题？

Answer 1

在 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，您的键盘应该会弹出。希望这会有所帮助。