AngularJS के लिए ऊंचाई में टाइमर देखने से बचना

नेविगेशन ऊंचाई गतिशील होने पर AngularJS प्रोग्रामर को अक्सर उत्तरदायी नेविगेशन की चुनौती का सामना करना पड़ता है। इससे नेविगेशन ऊंचाई परिवर्तनों के जवाब में सामग्री के मार्जिन-टॉप मान को समायोजित करने की आवश्यकता होती है।

पहले, नेविगेशन ऊंचाई परिवर्तनों का पता लगाने के लिए एक टाइमर का उपयोग किया जाता था, लेकिन इस दृष्टिकोण में कमियां थीं: टाइमर का उपयोग और सामग्री के मार्जिन-टॉप को समायोजित करने में देरी।

सौभाग्य से, एक बेहतर दृष्टिकोण मौजूद है: AngularJS की $watch कार्यक्षमता का लाभ उठाना। टाइमर के बजाय, एक द्रष्टा को 'emHeightSource' में पंजीकृत किया जाता है, जिसे प्रत्येक $digest चक्र के दौरान लागू किया जाता है। देखने वाला '__height' प्रॉपर्टी को अपडेट करता है। ऊंचाई।

वॉचर्स का उपयोग करके यहां परिष्कृत कोड दिया गया है:

/* * ऊंचाई बदलने और मार्जिन-टॉप बदलने पर सूचना प्राप्त करें */ .directive('emHeightTarget', function() { वापस करना { लिंक: फ़ंक्शन (स्कोप, एलीम, एटर्स) { scope.$watch('__height', function(newHeight, OldHeight ) { elem.attr ('स्टाइल', 'मार्जिन-टॉप:' (58 न्यूहाइट) 'पीएक्स'); } ); } } } ) /* * ऊंचाई में बदलाव के लिए प्रत्येक $digest की जांच करता है */ .directive('emHeightSource', function() { वापस करना { लिंक: फ़ंक्शन (स्कोप, एलीम, एटर्स) { स्कोप.$वॉच(फ़ंक्शन() { दायरा.__ऊंचाई = elem.ऊंचाई(); } ); } } } )