[Javascript] Angularjs - एनजी-क्लोक / एनजी-शो तत्व झपकी


Answers

जैसा कि प्रलेखन में उल्लिखित है , आपको ng-cloak विशेषता के आधार पर इसे छिपाने के लिए अपने सीएसएस में एक नियम जोड़ना चाहिए:

[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none;
}

हम "एंगुलर के साथ निर्मित" साइट पर समान चाल का उपयोग करते हैं, जिसे आप गिथब पर स्रोत देख सकते हैं: https://github.com/angular/builtwith.angularjs.org

उम्मीद है की वो मदद करदे!

Question

मुझे angular.js में निर्देश / कक्षा ng-cloak या ng-show साथ कोई समस्या है।

क्रोम ठीक काम करता है, लेकिन फ़ायरफ़ॉक्स ng-cloak या ng-show तत्वों के झपकी का कारण बन रहा है। IMHO यह कनवर्टिंग ng-cloak / ng-show को style="display: none;" , शायद फ़ायरफ़ॉक्स जावास्क्रिप्ट कंपाइलर थोड़ा धीमा है, इसलिए तत्व थोड़ी देर के लिए प्रकट होते हैं और फिर छुपाते हैं?

उदाहरण:

<ul ng-show="foo != null" ng-cloak>..</ul>



मुझे एक समस्या थी जहां एक <div ng-show="expression"> प्रारंभ में एक सेकेंड के अंश के लिए दिखाई देगी, भले ही "अभिव्यक्ति" प्रारंभ में झूठी थी, एनजी-शो निर्देश को चलाने का मौका मिलने से पहले।

मैंने जिस समाधान का उपयोग किया था, उसे मैन्युअल रूप से छिपाने के लिए <div ng-show="expression" ng-hide> में "ng-hide" क्लास को मैन्युअल रूप से जोड़ना था। एनजी-शो निर्देश इसके बाद आवश्यक एनजी-छुपा वर्ग को जोड़ / हटा देगा।




आप बेहतर कोणीय दस्तावेज़ का संदर्भ लेंगे, क्योंकि संस्करण [1.4.9] नीचे अपडेट किया गया है जिससे यह डेटा-एनजी-क्लोक निर्देश का समर्थन कर सके।

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}



ng-show बजाय ng-if इसका उपयोग करना बेहतर है। ng-if पूरी तरह से डीओएम में तत्व को हटा देता है और पुन: प्रयास करता है और एनजी-शो ब्लिंकिंग से बचने में मदद करता है।




मैंने व्यक्तिगत रूप से ng-show बजाय ng-class विशेषता ng-class उपयोग करने का निर्णय लिया। मुझे इस मार्ग पर विशेष रूप से पॉप-अप विंडो के लिए बहुत अधिक सफलता मिली है जो हमेशा डिफ़ॉल्ट रूप से नहीं दिखाए जाते हैं।

<div class="options-modal" ng-show="showOptions"></div>

अब है: <div class="options-modal" ng-class="{'show': isPrintModalShown}">

विकल्प के लिए सीएसएस के साथ-मोडल क्लास display: none जा रहा display: none डिफ़ॉल्ट रूप से display: none । शो क्लास में display:block सीएसएस।




लाइन ब्रेक से बचें

<meta http-equiv="Content-Security-Policy"              content="
default-src 'FOO';   
script-src 'FOO';    
style-src  'FOO'; 
font-src 'FOO';">

फ़ायरफ़ॉक्स 45.0.1 के साथ काम करता है

<meta http-equiv="Content-Security-Policy"              content="    default-src 'FOO';    script-src 'FOO';     style-src  'FOO';    font-src 'FOO';">



इसके लायक होने के लिए, मेरे पास एक समान मुद्दा था जो काम नहीं कर रहा था। यह देखने के लिए कि क्या यह मदद करता है, स्रोत फ़ाइलों का पुन: उपयोग करने के लिए सक्षम कैश के साथ अपने ऐप / साइट को जांचना उचित हो सकता है।

झटके के साथ मेरे रन-इन के साथ, मैं DevTools के साथ परीक्षण कर रहा था और कैश अक्षम था। कैशिंग सक्षम के साथ बंद पैनल छोड़ने से मेरी समस्या तय की गई।




उपर्युक्त चर्चा के अनुसार

[ng-cloak] {
                display: none;
            }

समस्या को हल करने का एक सही तरीका है।




मैंने उपरोक्त एनजी-क्लोक समाधान की कोशिश की लेकिन इसमें अभी भी फ़ायरफ़ॉक्स के साथ अंतःविषय समस्याएं हैं। मेरे लिए काम करने वाला एकमात्र कामकाज फॉर्म की लोडिंग में देरी करना है जब तक कि कोणीय पूरी तरह से लोड न हो जाए।

मैंने बस ऐप में एनजी-इनिट जोड़ा और फॉर्म के पक्ष में एनजी-अगर का उपयोग यह जांचने के लिए किया कि क्या वेरिएबल I सेट पहले ही लोड हो चुका है या नहीं।

<div ng-app="myApp" ng-init="loaded='yes'"> 
   <form ng-if="loaded.length > 0">
      <!--all my elements here-->
   </form>
</div>



वास्तव में दो अलग-अलग समस्याएं हैं जो झिलमिलाहट के मुद्दे का कारण बन सकती हैं और आप इनमें से एक या दोनों का सामना कर सकते हैं।

समस्या 1: एनजी-क्लोक बहुत देर हो चुकी है

इस मुद्दे पर कई उत्तरों में वर्णित इस मुद्दे को हल किया गया है यह सुनिश्चित करना है कि अंगुलरजेएस सिर में लोड हो। NgCloak दस्तावेज़ देखें:

सर्वोत्तम परिणाम के लिए, angular.js स्क्रिप्ट को HTML फ़ाइल के मुख्य भाग में लोड किया जाना चाहिए; वैकल्पिक रूप से, सीएसएस नियम (उपरोक्त) को आवेदन की बाहरी स्टाइलशीट में शामिल किया जाना चाहिए।

समस्या 2: एनजी-क्लोक बहुत जल्द हटा दिया जाता है

यह समस्या तब होती है जब आपके पृष्ठ पर बहुत सी सीएसएस एक दूसरे पर कैस्केडिंग नियमों के साथ होती है और शीर्ष परत लागू होने से पहले सीएसएस की गहरी परतें चमकती हैं।

आपके तत्व में style="display:none" जोड़ने वाले उत्तरों में jQuery समाधान इस समस्या को हल करते हैं जब तक कि शैली देर से हटा दी जाती है (वास्तव में ये समाधान दोनों समस्याओं को हल करते हैं)। हालांकि, अगर आप सीधे अपने एचटीएमएल में शैलियों को नहीं जोड़ना पसंद करते हैं तो आप ng-show का उपयोग करके एक ही परिणाम प्राप्त कर सकते ng-show

प्रश्न से उदाहरण के साथ शुरू:

<ul ng-show="foo != null" ng-cloak>..</ul>

अपने तत्व में एक अतिरिक्त एनजी-शो नियम जोड़ें:

<ul ng-show="isPageFullyLoaded && (foo != null)" ng-cloak>..</ul>

(आपको समस्या से बचने के लिए ng-cloak रखने की जरूरत है 1)।

फिर आपके app.run सेट में isPageFullyLoaded लोड किया isPageFullyLoaded :

app.run(['$rootScope', function ($rootScope) {
    $rootScope.$safeApply = function (fn) {
        $rootScope.isPageFullyLoaded = true;
    }
}]);

ध्यान रखें कि आप जो भी कर रहे हैं उसके आधार पर, app.run isPageFullyLoaded सेट करने के लिए सबसे अच्छी जगह हो सकती है या नहीं भी हो सकती है। महत्वपूर्ण बात यह सुनिश्चित करना है कि isPageFullyLoaded को जो भी हो, उसके बाद आप फ्लिकर नहीं चाहते हैं, उपयोगकर्ता को प्रकट होने के लिए तैयार है।

ऐसा लगता है जैसे समस्या 1 समस्या है ओपी मार रहा है, लेकिन अन्य लोग यह पाते हैं कि समाधान काम नहीं करता है या केवल आंशिक रूप से काम करता है क्योंकि वे इसके बजाय समस्या 2 को मार रहे हैं।

महत्वपूर्ण नोट: एनजी-क्लोक दोनों को बहुत देर से लागू होने के लिए समाधान लागू करना सुनिश्चित करें और जल्द ही हटा दिया जाए। इन समस्याओं में से केवल एक को हल करने से लक्षणों से छुटकारा नहीं मिल सकता है।




मुझे वास्तव में रिक स्ट्राल के वेब लॉग से सुझाव मिला कि मेरी समस्या पूरी तरह से तय की गई है (क्योंकि मुझे अभी भी एनजी-क्लोक ब्लिंकिंग कच्चे {{code}} के साथ अजीब समस्या थी, खासकर फायरबग चलाने के दौरान):

परमाणु विकल्प: सामग्री को मैन्युअल रूप से छुपाएं

स्पष्ट सीएसएस का उपयोग करना सबसे अच्छा विकल्प है, इसलिए निम्नलिखित आवश्यक नहीं होना चाहिए। लेकिन मैं इसे यहां उल्लेख करूंगा क्योंकि यह कुछ अंतर्दृष्टि देता है कि आप अन्य ढांचे के लिए या अपने स्वयं के मार्कअप आधारित टेम्पलेट्स में लोड पर मैन्युअल रूप से सामग्री को कैसे छुपा / दिखा सकते हैं।

इससे पहले कि मुझे पता चला कि मैं पृष्ठ में सीएसएस शैली को स्पष्ट रूप से एम्बेड कर सकता हूं, मैंने यह पता लगाने की कोशिश की थी कि क्यों एनजी-क्लोक अपना काम नहीं कर रहा था। कहीं भी एक घंटे बर्बाद करने के बाद मैंने आखिरकार कंटेनर को मैन्युअल रूप से छिपाने और दिखाने का फैसला किया। विचार सरल है - शुरुआत में कंटेनर को छुपाएं, फिर एक बार एंगुलर ने पृष्ठ से टेम्पलेट मार्कअप को प्रारंभिक प्रसंस्करण और हटाने के बाद इसे दिखाया है।

एंगुलर नियंत्रण प्राप्त करने के बाद आप सामग्री को मैन्युअल रूप से छुपा सकते हैं और इसे दृश्यमान बना सकते हैं। ऐसा करने के लिए मैंने उपयोग किया:

<div id="mainContainer" class="mainContainer boxshadow"
    ng-app="app" style="display:none">

प्रदर्शन पर ध्यान दें: कोई भी शैली जो पृष्ठ पर शुरू में तत्व को स्पष्ट रूप से छुपाती नहीं है।

फिर एक बार कोणीय ने अपना प्रारंभिकरण चलाया है और पृष्ठ पर टेम्पलेट मार्कअप को प्रभावी रूप से संसाधित किया है, तो आप सामग्री दिखा सकते हैं। कोणीय के लिए यह 'तैयार' घटना app.run () फ़ंक्शन है:

app.run( function ($rootScope, $location, cellService) {        
    $("#mainContainer").show();
    …
});

यह प्रभावी ढंग से प्रदर्शन को हटा देता है: कोई भी शैली और सामग्री प्रदर्शित नहीं करता है। जब तक app.run () आग लगती है तो डोम भरे हुए डेटा या कम से कम खाली डेटा के साथ प्रदर्शित करने के लिए तैयार होता है - कोणीय नियंत्रण प्राप्त हो गया है।




स्वीकार्य उत्तर के अतिरिक्त यदि आप ng-cloak को ट्रिगर करने का वैकल्पिक तरीका उपयोग कर रहे हैं ...

आप अपने सीएसएस / कम में कुछ अतिरिक्त विशिष्टताओं को भी जोड़ना चाह सकते हैं:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
.ng-cloak, .x-ng-cloak,
.ng-hide {
    display: none !important;
}



अन्य उत्तरों के अलावा, यदि आपको अभी भी होने के लिए टेम्पलेट कोड का फ्लैश मिलता है तो संभव है कि आपके पास पृष्ठ के निचले हिस्से में आपकी स्क्रिप्ट हों और इसका मतलब है कि एनजी-क्लोक निर्देश सीधे काम नहीं करेगा। आप या तो अपनी स्क्रिप्ट को सिर पर ले जा सकते हैं या सीएसएस नियम बना सकते हैं।

दस्तावेज़ कहते हैं, "सर्वोत्तम परिणाम के लिए, angular.js स्क्रिप्ट को HTML दस्तावेज़ के मुख्य भाग में लोड किया जाना चाहिए; वैकल्पिक रूप से, उपरोक्त सीएसएस नियम को एप्लिकेशन की बाहरी स्टाइलशीट में शामिल किया जाना चाहिए।"

अब, यह बाहरी स्टाइलशीट नहीं होना चाहिए बल्कि सिर में एक तत्व में होना चाहिए।

<style type="text/css">
  .ng-cloak {
    display: none !important;
  }
</style>

स्रोत: https://docs.angularjs.org/api/ng/directive/ngCloak




मैंने ngCloak का उपयोग करके कभी भाग्य नहीं लिया है। ऊपर वर्णित सब कुछ के बावजूद मैं अभी भी झटकेदार हो रहा हूं। फ्लिकिंग से बचने का एकमात्र निश्चित तरीका है अपनी सामग्री को टेम्पलेट में रखना और टेम्पलेट शामिल करना। एसपीए में, एकमात्र एचटीएमएल जिसे कोणीय द्वारा संकलित करने से पहले मूल्यांकन किया जाएगा, आपका मुख्य index.html पृष्ठ है।

बस शरीर के अंदर सब कुछ ले लो और इसे एक अलग फ़ाइल में चिपकाएं और फिर:

<ng-include src="'views/indexMain.html'"></ng-include>

आपको कभी भी इस तरह की झटके नहीं मिलनी चाहिए क्योंकि कोणीय डीओएम में जोड़ने से पहले टेम्पलेट को संकलित करेगा।