AngularJS के लिए ऑन-चेंज निर्देश कैसे बनाएं?

Question

आम तौर पर एनजी मॉडल बाध्य मॉडल हर बार उपयोगकर्ता अपडेट कुंजी धक्का:

<input type="text" ng-model="entity.value" /> 

यह लगभग हर मामले में अच्छा काम करता है।

लेकिन जब मुझे ऑनकीप/ऑनकीडाउन ईवेंट के बजाय ऑनचेंज ईवेंट होता है तो मुझे अपडेट करने की आवश्यकता होती है।

कोणीय के पुराने संस्करणों में एक एनजी-मॉडल-तत्काल निर्देश था जो अब एनजी-मॉडल कार्यों के समान काम करता था (कम से कम उपयोगकर्ता के लिए - मुझे उनके कार्यान्वयन के बारे में कुछ नहीं पता)। तो पुराने संस्करण में अगर मैंने अभी एनजी मॉडल दिया है तो यह मॉडल एक्सचेंज अपडेट कर रहा था और जब मैंने एनजी-मॉडल-इंस्टेंट निर्दिष्ट किया तो यह मॉडल ऑनकीप अपडेट कर रहा था।

अब मुझे तत्व के "परिवर्तन" ईवेंट पर उपयोग करने के लिए एनजी-मॉडल की आवश्यकता है। मैं नहीं चाहता कि यह तत्काल हो। ऐसा करने का सबसे आसान तरीका क्या है?

संपादित

इनपुट अभी भी मॉडल में कोई अन्य परिवर्तन को प्रतिबिंबित करने के है - अगर मॉडल दूसरे स्थान पर अपडेट किया जाएगा, इनपुट का मूल्य इस परिवर्तन को दिखाने चाहिए।

मुझे एंजुलरज के पुराने संस्करणों में काम करने की तरह काम करने के लिए एनजी-मॉडल निर्देश होना चाहिए। किसी पर http://jsfiddle.net/selbh/EPNRd/

Answer 1

यहां मैंने आपके लिए चेंज निर्देश बनाया है। डेमो: http://jsfiddle.net/sunnycpp/TZnj2/52/

app.directive('onChange', function() {  
    return { 
     restrict: 'A', 
     scope:{'onChange':'=' }, 
     link: function(scope, elm, attrs) { 
      scope.$watch('onChange', function(nVal) { elm.val(nVal); });    
      elm.bind('blur', function() { 
       var currentValue = elm.val(); 
       if(scope.onChange !== currentValue) { 
        scope.$apply(function() { 
         scope.onChange = currentValue; 
        }); 
       } 
      }); 
     } 
    };   
}); 

Answer 2

मुझे यकीन है कि नहीं कर रहा हूँ अगर वहाँ यह करने के लिए एक बेहतर तरीका है, लेकिन आप एक कस्टम निर्देशों का उपयोग इस लक्ष्य को हासिल कर सकते हैं (:

यहाँ मैं क्या कर रहा हूँ का एक विवरण है jquery event you want)

<input type="text" ng-model="foo" custom-event="bar" /> 
<p> {{ bar }} </p> 

// create the custom directive 

app.directive('customEvent', function() { 
    return function(scope, element, attrs) { 
     var dest = attrs.customEvent; 

     $(element[0]).on('any-jquery-event', function(e) { 
      e.preventDefault(); 

      // on the event, copy the contents of model 
      // to the destination variable 
      scope[dest] = scope.foo; 

      if (!scope.$$phase) 
       scope.$apply(); 
     }); 
    } 
}); 

Answer 3

यह भी देखें: AngularJS ngChange निर्देश।

< इनपुट > पर लागू होने पर परिवर्तन प्रत्येक कुंजी प्रेस धुंध घटना पर नहीं होने के बाद होता है।

http://docs.angularjs.org/api/ng.directive:ngChange

Answer 4

Angularjs: input[text] ngChange fires while the value is changing: इस सवाल का जवाब एक बेहतर समाधान कस्टम निर्देश काम करने के लिए के साथ ngModel तो आप अभी भी अन्य निर्देशों कि ngModel के साथ जाने के सभी का उपयोग कर सकते की अनुमति देता है कि प्रदान करता है।

इसके अलावा

, एक और भी अधिक लचीला समाधान है कि घटना को निर्दिष्ट उपयोग करने के लिए (सिर्फ धुंधला नहीं) और अन्य गुण बहुत जल्द ही कोणीय करने के लिए बनाया जाना चाहिए के लिए अनुमति देता है: https://github.com/angular/angular.js/pull/2129