एक "प्लगइन" कॉलबैक

Question

के साथ एक jQuery प्लगइन से AngularJS मॉडल अपडेट करें मैं एक टच स्क्रीन कंप्यूटर के लिए एक वेब ऐप बना रहा हूं जिसके लिए ऑन-स्क्रीन कीबोर्ड की आवश्यकता है और मैं इस उत्कृष्ट का उपयोग करने का प्रयास कर रहा हूं (या कम से कम केवल एक मैं यह पाया कि वह भयानक नहीं था) कीबोर्ड। https://github.com/Mottie/Keyboard/

समस्या यह है कि, जैसा कि आपने पहले ही अनुमान लगाया होगा, कि ऑन-स्क्रीन कीबोर्ड का उपयोग करते समय मॉडल अपडेट नहीं होता है। यह मेरा कोड, काम करता है की तरह जो है, लेकिन यह बदसूरत के सभी प्रकार:

partitial एचटीएमएल: तो पर

$('.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 पेज नियंत्रक से jQuery प्लगइन द्वारा ट्रिगर किया गया परिवर्तन मैं कुछ चला सकता है। जाहिर है, यह केवल एक फ़ील्ड/मॉडल को अपडेट करने में काम करता है, नाम एक (जबकि ईमेल कोई भी काम नहीं करता है और नाम फ़ील्ड को ओवरराइट करेगा), कीबोर्ड के साथ उपयोग किए जाने पर मुझे अपडेट करने के लिए किसी भी फ़ील्ड की आवश्यकता होती है, और सही वाला। मैं इसे कम भयानक, हार्डकोडेड (यदि संभव हो और बहुत जटिल नहीं) तरीके से कैसे हल करूं?

Answer 1

कोणीय में इसे लिखने का तरीका वास्तव में एक निर्देश लिखना है। आप किसी विशेष वर्ग के नाम के साथ निर्देश का आकलन कर सकते हैं।

तो, अपने निर्देश अब की तरह

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

कुछ ऐसा दिखाई देगा अगर किसी भी तत्व दोनों कीबोर्ड और एनजी मॉडल का एक वर्ग तो परिभाषित किया है, अपने कीबोर्ड पॉप अप चाहिए। उम्मीद है की यह मदद करेगा।

Answer 2

मैंने गणराज निर्देश का संशोधन किया। अब मॉडल कीबोर्ड बटन के हर क्लिक पर अपडेट हो रहा है।

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