Bir jQuery eklentisinden "değiştir" geri bildirimi ile AngularJS modellerini güncelleştirin

Question

Ekran klavyesi gerektiren bir dokunmatik ekranlı bilgisayar için bir web uygulaması yapıyorum ve bu mükemmel (veya en az bir tanesini kullanmaya çalışıyorum) Bu korkunç değildi bulmak mümkün) klavye.

Sorun, önceden tahmin edebileceğiniz gibi, ekran klavyesini kullanırken modelin güncellenmemesidir. Bu eserlerin sıralama benim kod, ama çirkin her türlü:

partitial HTML: Öyleyse

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

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

:

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

partitial sayfa denetleyicisinden, klavyeyi başlatılıyor jQuery eklentisi tarafından tetiklenen değişiklik Bir şey çalıştırabilirim. Açıkçası bu sadece tek bir alan/model, bir isim (e-posta hiç çalışmaz ve isim alanının üzerine yazılırken) güncellenir, klavyeyle kullanıldığında güncellenecek herhangi bir sayıya ihtiyacım var. doğru olan. Bunu daha az korkunç, kodlanmamış (mümkünse ve çok karmaşık olmayan) şekilde nasıl çözebilirim?

Answer 1

Bunu Açısal olarak yazmanın yolu aslında bir yönerge yazmaktır. Belirli bir sınıf adıyla bir direktif belirleyebilirsiniz. Herhangi bir eleman daha sonra tanımlanan klavye ve ng-Modelinin bir sınıf hem sahipse

Yani, yönerge Şimdi

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

benzer görünümde olacaktır, klavye pop-up gerekir. Bu yardımcı olur umarım.

Answer 2

Ben ganraj yönergesini değiştirdim. Artık model her tuştakımında güncelleniyor.

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