javascript - Angular `watch` does not behave as expected -
मेरे पास कोड का निम्न स्निपेट है
फ़ंक्शन MyCtrl ($ scope, $ log) {$ Scope.name = 'आदमी'; $ Scope.guy = {}; फ़ंक्शन myWatch () {रिटर्न फ़ंक्शन (नयाव्यू, पुरानाव्यू) {$ log.info ('ये हैं मूल्य', नयावाले, पुरानावॉल्यूज); यदि (newValue === पुरानावर्तमान) {$ log.info ('वे समान हैं'); }}} $ दायरा। $ Watch ('guy', myWatch (), सच); $ Scope.guy = {'हैलो': 'विश्व'}; } जो आप कर सकते हैं - कंसोल प्रिंट की तलाश करें! यह विचार है:
- असाइन करें
आदमी - उस संपत्ति पर
$ watch सेट करें -
आदमी < / Code> -
newValue और पुराने वैल्यू को अलग होने की उम्मीद है और नहीं दिखता है वे कंसोल में समान हैं प्रिंट लॉग - विफल हो जाता है - और अधिक विशेष रूप से मुझे उम्मीद है कि
पुराना मूल्य होना {} और नया होना {'हैलो' : 'विश्व'} मैं क्या कर रहा हूँ गलत है, और जब मैं जरूरी हो तो इस तर्क को कैसे लागू करूँ?
मेरा मानना है कि आप समय के साथ एक समस्या का अनुभव कर रहे हैं, घड़ी मूल्य परिवर्तन से पहले पूरी तरह से सेट नहीं है और जब एक डायजेस्ट अंततः चलाना वास्तव में एक ही है अगर आप ऐसा करते हैं:
$ timeout (function () {$ scope.guy = {'हैलो': 'wor Ld '}; }, 3000, true); यह आपको वॉच सेटअप करने के लिए पर्याप्त समय देगा और बाद में एक बिंदु पर भी परिवर्तन देखेंगे। इस बदलाव के साथ आपकी अपेक्षा को पूरा करना चाहिए।
$ घड़ी और डायजेस्ट चक्रों को समझने के लिए संपादित करें: $ watch प्रत्येक $ डाइजेस्ट चक्र पर कॉल किया जाता है भले ही मान देखा जा रहा है या नहीं बदल जाता है, हालांकि, श्रोता को केवल पहली $ डाइजेस्ट चक्र पर कॉल किया जाता है, लेकिन देखा मूल्य तक नहीं कहा जाता है परिवर्तन। इसके अलावा घड़ी प्रत्येक $ डाइजेस्ट चक्र में कई बार चला सकता है, इस प्रकार श्रोता को पहले चक्र में कई बार कहा जा सकता है
यहां एक कोड स्निपेट है:
फ़ंक्शन myCtrl ($ scope, $ log, $ timeout) {$ scope। नाम = 'आदमी'; $ Scope.guy = {}; फ़ंक्शन myWatch () {रिटर्न फ़ंक्शन (नयाव्यू, पुरानाव्यू) {$ log.info ('ये हैं मूल्य', नयावाले, पुरानावॉल्यूज); यदि (newValue === पुरानावर्तमान) {$ log.info ('वे समान हैं'); } और {$ log.info ('वे अलग हैं'); }}} $ दायरा। $ Watch ('guy', myWatch (), सच); $ टाइमआउट (फ़ंक्शन () {$ scope.guy = {'हैलो': 'विश्व'};}, 3000, सत्य); } & lt;! DOCTYPE html & gt; & Lt; html एनजी-एप & gt; & Lt; शीर्ष & gt; & Lt; स्क्रिप्ट डेटा -रूपी = "angular.js@1.2.16" डेटा-सेवर = "1.2.16" src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular min.js "& gt; & lt; / स्क्रिप्ट & gt; & Lt; link rel = "स्टाइलशीट" href = "style.css" / & gt; & Lt; script src = "script.js" & gt; & lt; / स्क्रिप्ट & gt; & Lt; / head & gt; & Lt; body ng-controller = "MyCtrl" & gt; & Lt; h1 & gt; हैलो {{name}}! & Lt; / h1 & gt; & Lt; / body & gt; & Lt; / html & gt;
Comments
Post a Comment