एनजी के अंदर एचटीएमएल तत्व अगर पृष्ठ लोड हो रहा है तो

Question

मेरे पृष्ठ पर मेरे पास एनजी के अंदर एक div है- अगर लोड करने के लिए कई स्क्रिप्ट हैं, यानी जब पृष्ठ पूरी तरह से लोड नहीं होता है। Div दिखाई देता है। जब तक पेज/कोणीय पूरी तरह से लोड नहीं होता है तब तक मैं इसे कैसे छिपा सकता हूं।

<div id = "menu" ng-if="someCondition" > 
    <ul class="user-menu"> 
     <li> 
      menu item 1 
     </li> 
     <li> 
      menu item 2 
     </li> 
    </ul> 
</div> 

Answer 1

ng-cloak के लिए प्रलेखन पर नज़र डालें।

प्रलेखन से

:

ngCloak निर्देश संक्षेप में अपने कच्चे (uncompiled) रूप में ब्राउज़र द्वारा प्रदर्शित किया जा रहा है, जबकि अपने आवेदन लोड कर रहा है से कोणीय एचटीएमएल टेम्पलेट को रोकने के लिए प्रयोग किया जाता है। से बचने के लिए इस निर्देश का उपयोग करें HTML टेम्पलेट डिस्प्ले के कारण अवांछनीय झिलमिलाहट प्रभाव।

इसके अलावा

:

निर्देश तत्व को लागू किया जा सकता है, लेकिन प्राथमिकता दी उपयोग ब्राउज़र को देखने के प्रगतिशील प्रतिपादन की अनुमति के लिए पेज के छोटे हिस्से के लिए कई ngCloak निर्देशों को लागू करने के लिए है।

<div id = "menu" ng-if="someCondition" ng-cloak> 
    <ul class="user-menu"> 
     <li> 
      menu item 1 
     </li> 
     <li> 
      menu item 2 
     </li> 
    </ul> 
</div> 

यह कैसे काम करता:

निम्नलिखित शैलियों (Angular.js फ़ाइल अनिवार्य रूप से एक .css फ़ाइल के रूप में काम कर रहा है) दस्तावेज़ पर लागू होते हैं जब Angular.js भरी हुई है (की सिफारिश की है जो अपने पृष्ठ के सिर में होना)। जब कोणीय वास्तव में डोम लोड पर चलता है, तो यह एनजी-क्लोक विशेषता को हटा देता है, तत्वों को अनदेखा करता है।

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

आप अपने दस्तावेज़ के शीर्ष में कोणीय लोड नहीं है, तो आप शैलियों मैन्युअल सिर को जोड़ सकते हैं और सब कुछ अभी भी काम करेगा। बस

<style type="text/css"> 
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { 
     display: none !important; 
    } 
</style> 

Answer 2

इस तथ्य यह है कि आप केवल एक छोटा सा कोड स्निपेट उपलब्ध लेकिन मेरा अनुमान है कि नियंत्रक अभी तक प्रारंभ नहीं किया गया है (हुड कोणीय अपने HTML डोम के द्वारा पार्स और जब यह उसके अनुसार कार्य करेगा किया जा रहा है की वजह से एक अनुमान है कहा जाता है।)

यदि आप एक साधारण मार्ग का उपयोग करते हैं तो यह पूरी तरह से इसे रोक देगा।

वैकल्पिक रूप से आप सीएसएस डिस्प्ले के साथ अपनी सभी एनजी-अगर शर्तों को रख सकते हैं: कोई नहीं; और उसके बाद एप लोड हो जाने के बाद उन सभी के माध्यम से फिर से भरें

Answer 3

सशर्त ऑपरेटर का उपयोग करें।

<div id="menu" ng-if="someCondition.length > 0 ? true : false"> 
    <ul class="user-menu"> 
     <li> 
      menu item 1 
     </li> 
     <li> 
      menu item 2 
     </li> 
    </ul> 
</div>