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

Question

我建立了它需要一个屏幕键盘触摸屏电脑一个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>

从partitial页面控制器初始化键盘:

$('.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,则应弹出键盘.希望这可以帮助.