Javascript 从jQuery插件用“更新AngularJS模型”；“论变革”；回拨

我正在为一台需要屏幕键盘的触摸屏计算机构建一个web应用程序，我正在尝试使用这个优秀的（或者至少是我能找到的唯一一个不糟糕的）键盘。

问题是，正如您可能已经猜到的，当使用屏幕键盘时，模型没有得到更新。这是我的代码，虽然很管用，但有点难看：

部分HTML：

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

---

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

我修改了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);
                }); 
            }
        }
    });
    }
  };
});

---

使用指令调用优秀键盘的键盘方法。在这种情况下，您可以使用元素的ngModel。建议使用类似于angular-ui.js的ui-select2的东西，angular ui对此是否有必要，甚至有帮助？对于这个特殊的问题，除了一个简单的文本字段之外，任何东西都是多余的，除非它已经包含了一个更好的屏幕键盘。不要告诉你包含

angular ui.js

。我告诉您实现

键盘

指令，就像实现

ui-select2

一样。也许您可以将代码提交到

angular ui.js

。确实如此，效果非常好。我是AngularJS新手，没有网络编程背景，但我可以说这是一个很好的框架。我得试着弄清楚什么时候使用指令。哇。。那是我写的。。所以，我不希望它不经过任何修改就可以工作。如果您需要操作DOM或查询DOM并获取元素，通常需要一个指令。我希望您不需要将

element

包装为

$（element）

，因为它已经是

jQuery

对象。对于未来的谷歌用户，我发现“已接受”事件比“更改”更适合这里直到用户按下“接受”按钮，Mottie键盘才向文本框提交更改。如果usePreview设置为false，则change函数可能正常工作，如这里的示例所示。

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);
                }); 
            }
        }
    });
    }
  };
});