Update AngularJS models from a jQuery plugin with a "on change" callback

angularjs, dom, javascript, jquery, on-screen-keyboard

Solution

The way to write this in Angular is to actually write a directive. You can assosciate a directive with a particular class name.

So, your directive would look something like

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

Now if any element has both a class of keyboard and ng-Model defined then, your keyboard should pop-up. Hope this helps.

Problem

I'm building a web app for a touch screen computer which needs an on-screen keyboard and am attempting to use this excellent (or the least the only one I was able to find that wasn't terrible) keyboard. https://github.com/Mottie/Keyboard/ The problem is, as you might have guessed already, that the model doesn't get updated when using the on-screen keyboard. This is my code, which sort of works but it all sorts of ugly: The partitial HTML: ``` <input type="text" class="keyboard" ng-model="newUser.name"> <input type="text" class="keyboard" ng-model="newUser.email> ``` Initializing the keyboard, from the partitial page controller: ``` $('.keyboard') .keyboard({ stickyShift: false, usePreview: false, autoAccept: true, change: function(e, kb, el) { $scope.newUser.name = el.value; } }); ``` So on change triggered by the jQuery plugin I can run something. Obviously this only works updating a single field/model, the name one (while the email one doesn't work at all and will overwrite the name field), I need any number of fields to be updated when used with the keyboard, and the correct one. How do I solve this in a less terrible, not hardcoded (if possible and not too complex) way?

Original source