AngularJS: स्वचालित रूप से मॉडल में परिवर्तन का पता लगाता है


103

मान लीजिए कि मैं कुछ करना चाहता था जैसे कि जब भी किसी मॉडल का मान बदलता है तो कुछ कोड (जैसे सर्वर पर डेटा सहेजना) चलाते हैं। क्या ng-changeप्रत्येक नियंत्रण पर कुछ ऐसा सेट करके ऐसा करने का एकमात्र तरीका है जो संभवतः मॉडल को बदल सकता है?

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

myModel.on('change', function() {
  $.post("/my-url", ...);
});

जैसे आप रीढ़ की हड्डी के साथ कुछ देख सकते हैं।

जवाबों:


151

दृश्यों {{}}और / या एनजी-मॉडल के साथ, कोणीय $watch()पर्दे के पीछे आपके लिए स्थापित कर रहा है।

डिफ़ॉल्ट रूप $watchसे संदर्भ द्वारा तुलना करता है। आप के लिए तीसरे पैरामीटर सेट करते हैं $watchकरने के लिए true, कोणीय बजाय "उथले" परिवर्तन के लिए वस्तु देखेंगे। सरणियों के लिए इस का अर्थ है सरणी वस्तुओं की तुलना करना, ऑब्जेक्ट मैप के लिए इसका अर्थ है गुणों को देखना। तो यह वही करना चाहिए जो आप चाहते हैं:

$scope.$watch('myModel', function() { ... }, true);

अद्यतन : कोणीय v1.2 ने इसके लिए एक नई विधि जोड़ी, '$ watchCollection () :

$scope.$watchCollection('myModel', function() { ... });

ध्यान दें कि "उथले" शब्द का उपयोग "गहरी" के बजाय तुलना का वर्णन करने के लिए किया जाता है क्योंकि संदर्भों का पालन नहीं किया जाता है - उदाहरण के लिए, यदि देखी गई वस्तु में एक संपत्ति मूल्य होता है जो किसी अन्य वस्तु का संदर्भ होता है, तो उस संदर्भ की तुलना करने के लिए पालन नहीं किया जाता है दूसरी वस्तु।


1
आह, महान! क्या ऐसा कोई कारण है जो ऐसा लगता है कि यह सब प्रलेखित है (यानी, मुझे नहीं लगता कि कोणीय साइट पर किसी भी ट्यूटोरियल ने सीधे $ घड़ियां स्थापित करने का उल्लेख किया है)? क्या इसके बारे में कुछ भी बुरा है जो ng-changeइनपुट पर नियंत्रण स्थापित कर सकता है (संभावित कई) हुक एक बेहतर विचार को नियंत्रित करता है?
एलेक

12
हाँ, यह अच्छा होगा यदि मुख्य ट्यूटोरियल ने कहीं $ घड़ी का उल्लेख किया है। इस दृष्टिकोण के बारे में "बुरा" यह है कि यह समय लेने वाली हो सकती है यदि आपका मॉडल बड़ा है (प्रत्येक पाचन चक्र - इनपुट क्षेत्र में प्रत्येक कीस्ट्रोक - इस मॉडल का परिणाम गहरा गंदा-चेक किया जाएगा, संभवतः कई बार) । उस मामले में, चयनात्मक $ वॉच () तों या चयनात्मक एनजी-परिवर्तन बेहतर होगा।
मार्क राजकोक

8

और अगर आपको अपने रूप तत्वों को स्थिति के अनुसार (संशोधित / संशोधित नहीं) गतिशील रूप से स्टाइल करना है या परीक्षण करना है कि क्या कुछ मूल्य वास्तव में बदल गए हैं, तो आप निम्न मॉड्यूल का उपयोग कर सकते हैं, स्वयं द्वारा विकसित: https://github.com/betsol / कोणीय-इनपुट संशोधित

यह फॉर्म में अतिरिक्त गुण और विधियाँ जोड़ता है और यह बाल तत्व है। इसके साथ, आप परीक्षण कर सकते हैं कि क्या किसी तत्व में नया डेटा है या परीक्षण भी है यदि पूरे फॉर्म में नया सहेजा गया डेटा है।

आप निम्न वॉच को सेटअप कर सकते हैं: $scope.$watch('myForm.modified', handler)और आपके हैंडलर को कॉल किया जाएगा यदि कुछ फॉर्म तत्वों में वास्तव में नया डेटा है या यदि यह प्रारंभिक स्थिति में उलट है।

इसके अलावा, आप modifiedवास्तव में AJAX कॉल के माध्यम से सर्वर पर भेजे गए डेटा की मात्रा को कम करने के लिए व्यक्तिगत फॉर्म तत्वों की संपत्ति का उपयोग कर सकते हैं । अपरिवर्तित डेटा भेजने की कोई आवश्यकता नहीं है।

एक बोनस के रूप में, आप कॉल फॉर्म के माध्यम से अपने फॉर्म को प्रारंभिक अवस्था में वापस ला सकते हैं reset()

आप मॉड्यूल का डेमो यहां देख सकते हैं: http://plnkr.co/edit/g2MDXv81OOBuGo6ORvdt?p=preview

चीयर्स!


क्या नियंत्रक में यह जांचने का कोई तरीका है। उदाहरण के लिए यदि x बटन पर क्लिक करें तो क्या मैं एक (myform.modified) पुष्टिकरण पॉपअप दिखा सकता हूं?
फ्लैश

बेशक, बस अपने नियंत्रक के फ़ंक्शन के लिए फॉर्मकंट्रोलर पास करें: <form name="myForm">, <button ng-click="vm.doSomething(myForm)">
स्लाव फोमिन II

धन्यवाद, यह केवल तभी होगा जब फॉर्म को संशोधित किया गया था?
फ्लैश

यह आपके कंट्रोलर FormControllerके doSomething()फंक्शन में जाएगा । आप उस फ़ंक्शन के अंदर कुछ भी कर सकते हैं, उदाहरण के लिए, चेक करें कि क्या फॉर्म वास्तव में FormController.modifiedबूलियन संपत्ति की जांच करके संशोधित किया गया है।
स्लाव फोमिन II

धन्यवाद! अच्छा फीचर
फ्लैश
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.