Zaktualizuj modele AngularJS z wtyczki jQuery z wywołaniem "na zmianę"

Question

Buduję aplikację internetową dla komputera z ekranem dotykowym, który wymaga klawiatury ekranowej i próbuję użyć tego znakomitego (lub najmniejszego z nich) Udało mi się znaleźć, że to nie była straszna) klawiatura. https://github.com/Mottie/Keyboard/

Problem polega na tym, jak już można się domyślić, że model nie jest aktualizowany podczas używania klawiatury ekranowej. To jest mój kod, który rodzaj robót, ale wszelkiego rodzaju brzydkie:

partitial HTML:

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

Inicjowanie klawiaturę z partitial kontrolera widoku:

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

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

Więc na zmiana wywołana przez wtyczkę jQuery mogę uruchomić coś. Oczywiście działa to tylko aktualizując pojedyncze pole/model, nazwę jeden (podczas gdy adres e-mail nie działa w ogóle i nadpisze pole nazwy), potrzebuję dowolnej liczby pól do zaktualizowania, gdy są używane z klawiaturą, a jeden poprawny. Jak rozwiązać ten problem w sposób mniej straszny, niezmienny (jeśli to możliwe i niezbyt skomplikowany)?

Answer 1

Sposobem napisania tego w Angular jest napisanie dyrektywy. Możesz docenić dyrektywę z określoną nazwą klasy.

Więc twój dyrektywa będzie wyglądać

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

Teraz, jeśli każdy element ma zarówno klasę klawiaturą i NG-modelu zdefiniowanego czasu, klawiatura powinna pop-up. Mam nadzieję że to pomoże.

Answer 2

Wprowadziłem modyfikację dyrektywy ganraj. Teraz model aktualizuje się za każdym kliknięciem przycisku klawiatury.

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