एंगुलरज - एनजी-क्लोक / एनजी-शो तत्व पलक

Question

मेरे पास निर्देशांक / वर्ग ng-cloakया के साथ कोणीय.जेएस में एक मुद्दा है ng-show।

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

उदाहरण:

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

Comments

यदि आप प्रदर्शन सेट करते हैं: शुरू में इन तत्वों पर कोई भी शैली, क्या यह समस्या को ठीक नहीं करता है?

— एकॉनसु

मैं कोशिश करूंगा कि, मैं क्लास को जोड़ने के साथ कुछ ऐसा ही प्रयास कर रहा था (जो तत्व को छुपाता है) और फिर इसे मैन्युअल रूप से js के माध्यम से हटा रहा है, लेकिन यह और भी बुरा लग रहा था।

— मेल्कोरनेमिस

Answer 1

यद्यपि दस्तावेज़ में इसका उल्लेख नहीं है, लेकिन यह display: none;आपके सीएसएस में नियम जोड़ने के लिए पर्याप्त नहीं हो सकता है । उन मामलों में जहां आप शरीर में कोणीय.जे. लोड कर रहे हैं या टेम्पलेट्स को जल्द ही संकलित नहीं किया जाता है, ng-cloakनिर्देश का उपयोग करें और अपने सीएसएस में निम्नलिखित शामिल करें:

/* 
  Allow angular.js to be loaded in body, hiding cloaked elements until 
  templates compile.  The !important is important given that there may be 
  other selectors that are more specific or come later and might alter display.  
 */
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}

जैसा कि टिप्पणी में बताया गया है, !importantमहत्वपूर्ण है। उदाहरण के लिए, यदि आपके पास निम्न मार्कअप है

<ul class="nav">
  <li><a href="/foo" ng-cloak>{{bar}}</a></li>
</ul>

और आप उपयोग कर रहे हैं bootstrap.css, निम्नलिखित चयनकर्ता आपके ng-cloak'तत्व' के लिए अधिक विशिष्ट है

.nav > li > a {
  display: block;
}

इसलिए यदि आप बस के साथ एक नियम शामिल करते हैं display: none;, तो बूटस्ट्रैप का नियम पूर्वता लेगा और displayइसे सेट किया जाएगा block, इसलिए आप टेम्पलेट संकलन से पहले झिलमिलाहट देखेंगे।

Comments

यह भी ध्यान दें कि यदि आप एक एसिंक्रोनस लोडर का उपयोग कर रहे हैं तो यह समस्या हो सकती है। जैसे कि आवश्यकता होती है। क्योंकि समय के साथ .js में सीएसएस नियम समय पर पार्स नहीं किया जाएगा। उपरोक्त समाधान इस परिदृश्य को भी ठीक करता है।

— जोहान

मेरे लिए समस्या को ठीक नहीं करता है। पता नहीं - मुझे लगता है कि ब्राउज़र शुरू में चीजों को दिखाने के लिए बहुत उत्सुक हैं ...

— एंड्री Drozdyuk

ब्राउज़र को सीएसएस को बिना सीएसएस को ध्यान में रखते हुए, पहले पास पर भी प्रस्तुत करना चाहिए; यह अत्यधिक अक्षम होगा; डबल अपने सेटअप की जाँच करें: p

— एलेक्सजेल

आप एक बार फिर से बूटस्ट्रैप डोम कैसे कर सकते हैं जो एनजी-क्लोक्ड किया गया है, एक बार जब आप मॉड्यूल कोड को डोम लोड करते हैं?

— फुतुअत

यदि उपरोक्त सीएसएस आपके लिए काम नहीं कर रहा है, तो संभावना है कि आपका :अंदर ng:cloakहै, ठीक से नहीं बचा है। शुद्ध सीएसएस के लिए सुनिश्चित करें कि बैकलैश है। संकलित सीएसएस के लिए, जैसे स्टाइलस, यह होगा [ng\\:cloak]। यह सुनिश्चित करने के लिए अपने संकलित CSS की जाँच करें कि यह सही है।

— जो

Answer 2

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

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

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

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

Comments

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

— ntownsend

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

— एंड्री Drozdyuk

दूसरे शब्दों में, यदि आप अपने पृष्ठ के निचले भाग में अपने स्क्रिप्ट संदर्भ जोड़ रहे हैं (जैसा कि बहुत से लोग करते हैं); फिर अपने सीएसएस में नियम जोड़ें।

— GFoley83

मैं आवश्यकता के साथ कोणीय.जे जोड़ रहा था। जेएस, तो इससे मुझे मदद मिली।

— जैतून

एनजी-ऐप डायरेक्टिव हाउसिंग एचटीएमएल तत्व के एनजी-क्लोक निर्देश को जोड़ा गया। एक जादू की तरह काम किया। उदाहरण: <div ng-

— cloak

Answer 3

सुनिश्चित करें कि AngularJS headHTML में शामिल है । देखिये ngCloak doc :

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

Comments

हाँ! मुझे समझ नहीं आ रहा है कि हर जगह लोग पृष्ठ के अंत में कोणीय.जेएस को लोड करने की अनुशंसा क्यों करते हैं। मुझे बेहतर लगता है कि अगर कोणीय शुरू से ही नियंत्रण लेता है। मेरा ng-cloakअभी काम चल रहा है।

— इवान फेरर विला

मैं मानता हूं - अंत में भरी जाने वाली लिपियों के बारे में बात सामान्य वेब विकास से होती है, जहां आप चाहते हैं कि पृष्ठ जेएस से पहले कुछ प्रदर्शित करे, लेकिन यह कोणीय के मामले में, आप वास्तव में रिवर्स चाहते हैं।

— तेज

और किसी भी शैली की चादरें लोड होने से पहले। जिसमें एंगुलर को शामिल किया गया है headलेकिन स्टाइल शीट के बाद इसमें समस्या को ठीक नहीं किया गया है।

— अगमलेचर

Answer 4

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

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

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

आपको कभी भी इस तरह से कोई चंचलता नहीं आनी चाहिए जैसे कि DOM को जोड़ने से पहले Angular टेम्पलेट संकलित करेगा।

Comments

वास्तव में मैं क्या उपयोग करता हूं - साफ और सरल, कोई दर्दनाक हैक नहीं।

— दिमित्री ज़ैतसेव

कृपया ध्यान रखें कि ng-includeसर्वर से सामग्री लाने के लिए एक अतिरिक्त AJAX अनुरोध को जन्म देता है। मैं मुश्किल तरीके है कि आप का उपयोग कभी नहीं करना चाहिए सीखा ng-includeअंदर ng-repeat, उदाहरण के लिए।

— jsuddsjr

मेरे लिए काम किया। अपने मार्कअप में ng-appबाहर रखना याद रखें ng-include।

— 19e पर ग्रेहैमफ

यह समाधान सबसे अच्छा काम करता है, बिना किसी हिचकी के। यदि संभव हो, तो इस घोल का उपयोग करें।

— ११

यह समाधान वास्तव में कष्टप्रद स्थिति तय करता है। धन्यवाद!

— मैक्सवेल

Answer 5

ngBind और ngBindTemplate ऐसे विकल्प हैं जिन्हें CSS की आवश्यकता नहीं है:

<div ng-show="foo != null" ng-cloak>{{name}}</div>  <!-- requires CSS -->
<div ng-show="foo != null" ng-bind="name"></div>
<div ng-show="foo != null" ng-bind-template="name = {{name}}"></div>

Comments

अच्छा, सरल उत्तर। ng-bind'कर्ली ब्रेस फ्लैश' से बचने या ng-cloakटैग स्तर पर उपयोग करने का एक अच्छा तरीका है, हालांकि कुछ लोगों को लगता है कि यह कोड को कम पठनीय बनाता है। उनके लिए, मुझे दो दृष्टिकोणों को मिलाने का कोई कारण नहीं दिखता है।

— डेव एवरिट

एनजी-

— बिंद

Answer 6

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

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

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

Comments

यह मेरे उपयोग के मामले के लिए काम करता था, जब उपरोक्त में से कोई भी काम नहीं करता था।

— पोरल्यून

Answer 7

मेरे पास एक समान मुद्दा था और यह पता चला कि यदि आपके पास एक वर्ग है जिसमें संक्रमण हैं, तो तत्व झपकेगा। मैंने सफलता के बिना एनजी-क्लोक जोड़ने की कोशिश की, लेकिन संक्रमण को हटाकर बटन ने पलक झपकना बंद कर दिया।

मैं ईओण ढांचे का उपयोग कर रहा हूं और बटन-रूपरेखा में यह संक्रमण है

.button-outline {
  -webkit-transition: opacity .1s;
  transition: opacity .1s;
}

बस संक्रमण को हटाने के लिए वर्ग को अधिलेखित करें और बटन पलक झपकना बंद कर देगा।

अपडेट करें

आयनिक पर फिर एनजी-शो / एनजी-छिपाने का उपयोग करते समय एक झिलमिलाहट होती है। निम्नलिखित सीएसएस जोड़ना इसे हल करता है:

.ng-hide-add,
.ng-hide-remove {
  display: none !important;
}

स्रोत: http://forum.ionicframework.com/t/beta-14-ng-hide-show/14270/9

Comments

लेकिन क्या वह एनजी-छिपाने / निर्देश दिखाने के लिए एनिमेशन को अक्षम नहीं करेगा?

— कुशाग्र गौरव

मुझे याद नहीं आ रहा है। आपने इसे आज़माया और इसने एनिमेशन को निष्क्रिय कर दिया है?

— सेब फैनल्स

धन्यवाद। यह आयनिक पर एक बहुत ही विशेष समस्या है। मैंने .button-clear, .button-icon, .button-outline { @include transition(opacity 0s); }अपने स्कैस में जोड़ा ।

— होजेबेल

Answer 8

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

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

Comments

वाह, मैंने कोशिश की सभी विकल्पों में से, यह चाल चली। धन्यवाद!

— निकोला

सबसे अच्छा उपाय! इसने मुझे कई महीनों तक पागल किया! धन्यवाद!

— अबेलबेब्स्नाबी

मैं आयनिक फ्रेमवर्क का उपयोग कर रहा हूं और यह एकमात्र उत्तर है जो वास्तव में काम करता है

— मिकेल

Answer 9

की कोशिश बंद । मैं गंभीर हूँ। यह मेरे मामले में मदद करता है।

स्वीकृत उत्तर को लागू करें और फिर सुनिश्चित करें कि आपके फ़ायरफ़ॉक्स में फ़ायरबग बंद हो गया है : F12 दबाएं फिर इस पृष्ठ के लिए फ़ायरबग को बंद करें - ऊपरी दाएं कोने में छोटा बटन।

Comments

हाँ, यह मेरे लिए किया था धन्यवाद!

— मेडइनमार्ड्स

धन्यवाद, वह मुझे पागल कर रहा था। अजीब बग

— स्टीफन सिम्पसन

Answer 10

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

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

इस समस्या को इस पृष्ठ पर दिए गए उत्तरों में से कई में descibed के रूप में हल किया गया है ताकि यह सुनिश्चित किया जा सके कि सिर में AngularJS लोड है। देखिये ngCloak doc :

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

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

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

जोड़ने में जवाब में jQuery के समाधान style="display:none"अपने तत्व में से इस मुद्दे को तब तक हल करते हैं जब तक कि शैली को देर से हटा दिया जाता है (वास्तव में ये समाधान आपकी समस्याओं को हल करते हैं)। हालाँकि, यदि आप अपने HTML में सीधे शैलियों को नहीं जोड़ना पसंद करते हैं, तो आप उसी परिणाम का उपयोग करके प्राप्त कर सकते हैं 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:

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

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

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

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

Comments

इसने मेरे लिए यह तय किया "स्क्रिप्ट को हेड सेक्शन में लोड किया जाना चाहिए"

— एलोपी

Answer 11

हम अपनी कंपनी में इस समस्या में भाग गए और उन झिलमिलाते एनजी-शो तत्वों के लिए सीएसएस स्टाइल में "प्रदर्शन: कोई नहीं" जोड़कर इसे हल किया। हमें एनजी-क्लोक का उपयोग बिल्कुल नहीं करना था। इस धागे में दूसरों के विपरीत, हमने सफारी में इस मुद्दे का अनुभव किया, लेकिन फ़ायरफ़ॉक्स या क्रोम नहीं - संभवतः आईओएस 7 में सफारी के आलसी पुनरावृत्ति बग के कारण ।

Answer 12

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

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

Answer 13

नीचे दिए गए कथनों को हेड टैग में रखते हुए इस मुद्दे को तय किया

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

आधिकारिक दस्तावेज

Answer 14

मुझे इनमें से कोई भी तरीका काम नहीं कर सकता था, इसलिए मैंने आखिरकार निम्न कार्य किया। उस तत्व के लिए जिसे आप शुरू में छिपाना चाहते हैं:

<div <!--...--> style="display: none;" ng-style="style">

फिर अपने कंट्रोलर में, इसे ऊपर या पास में जोड़ें:

$scope.style = { display: 'block' };

इस तरह, तत्व शुरू में छिपा हुआ है, और केवल दिखाता है कि नियंत्रक कोड वास्तव में कैसे चला है।

आप अपनी आवश्यकताओं के अनुसार प्लेसमेंट को ट्यून कर सकते हैं, शायद कुछ तर्क जोड़ सकते हैं। मेरे मामले में, मैं लॉगिन पथ पर जाता हूं यदि वर्तमान में लॉग इन नहीं किया गया है, और मैं अपना इंटरफ़ेस पहले से फ़्लिकर नहीं करना चाहता, इसलिए मैंने $scope.styleलॉग-इन चेक के बाद सेट किया है।

Answer 15

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

Comments

लेकिन यह भी डोम के उस हिस्से पर किसी भी चल रहे प्लगइन्स को नष्ट कर देता है ... (जैसे: jquery ui)

— गीर्ट बेलेमैन्स

Answer 16

मैं ईओण फ्रेमवर्क का उपयोग कर रहा हूं, सीएसएस शैली को जोड़ना कुछ परिस्थितियों के लिए काम नहीं कर सकता है, आप एनजी-शो के बजाय एनजी-का उपयोग करने की कोशिश कर सकते हैं या एन-छिपाने

रेफरी: https://books.google.com.my/books?id=-_5_CwAAQBAJ&pg=PA138&lpg=PA138&dq=ng-show+hide+flickering+in+source=bl&ots=m2Turk8DFh&sig=8hNiWx266266266266262 = onepage & q = एनजी शो% 20hide% 20flickering% 20in% 20ios & f = झूठी

Answer 17

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

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

Answer 18

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

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

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

Answer 19

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

डॉक्स का कहना है "सर्वश्रेष्ठ परिणाम के लिए, html दस्तावेज़ के मुख्य भाग में कोणीय.जेएस स्क्रिप्ट को लोड किया जाना चाहिए। वैकल्पिक रूप से, ऊपर के सीएसएस नियम को आवेदन की बाहरी स्टाइलशीट में शामिल किया जाना चाहिए।"

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

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

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

Answer 20

मैंने यहां पोस्ट किए गए हर समाधान की कोशिश की और अभी भी फ़ायरफ़ॉक्स में टिमटिमा रहा हूं।

यदि यह किसी की मदद करता है, तो मैंने इसे style="display: none;"मुख्य सामग्री डिव में जोड़कर हल किया , फिर $('#main-div-id').show();सर्वर से डेटा प्राप्त करने के बाद सब कुछ लोड होने के बाद jQuery (मैं पहले से ही पृष्ठ पर इसका उपयोग कर रहा था) ;

Comments

मैंने पाया कि यह एकमात्र समाधान था जो मेरे लिए काम करता था, लेकिन मैं JQuery के उपयोग से बचना चाहता था इसलिए एक विकल्प पाया। मेरा जवाब यहाँ देखें: stackoverflow.com/a/42527700/4214694

— एंड्रयू डाउन्स

Answer 21

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

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

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

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

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

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

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

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

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

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

Comments

मैंने पाया कि यह एकमात्र समाधान था जो मेरे लिए काम करता था, लेकिन मैं JQuery के उपयोग से बचना चाहता था इसलिए एक विकल्प पाया। मेरा जवाब यहाँ देखें: stackoverflow.com/a/42527700/4214694

— एंड्रयू डाउन्स

Answer 22

मैंने उपरोक्त सभी उत्तरों की कोशिश की और कुछ भी काम नहीं किया। हाइब्रिड ऐप को विकसित करने के लिए आयनिक का उपयोग करना और एक त्रुटि संदेश बनाने की कोशिश कर रहा था जो झिलमिलाहट नहीं था। मैंने अपने तत्व में एनजी-छिपाने की कक्षा जोड़कर अपनी समस्या को हल किया। जब त्रुटि होती है तो मेरी div पहले से ही तत्व दिखाने के लिए एनजी-शो है। एनगुलर-छिपाने के सेट को कोणीय लोड होने से पहले डिव को प्रदर्शित नहीं करने के लिए सेट करें। कोई एनजी-क्लोक या सिर को कोणीय जोड़ना आवश्यक नहीं है।

Answer 23

उपरोक्त चर्चा से ए.एस.

[ng-cloak] {
                display: none;
            }

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

Answer 24

मैं पॉपअप दिखाने और छिपाने के लिए एक निर्देश में एनजी-शो का उपयोग कर रहा हूं।

<div class="..." ng-show="showPopup">

उपरोक्त में से कोई भी मेरे लिए काम नहीं करता था, और एनजी-शो के बजाय एनजी का उपयोग करने पर एक ओवरकिल होगा। यह हर एक क्लिक पर DOM में संपूर्ण पॉपअप सामग्री को हटा और जोड़ देगा। इसके बजाय मैंने यह सुनिश्चित करने के लिए एक डॉक्यूमेंट जोड़ा कि यह एक ही तत्व में है कि यह डॉक्यूमेंट लोड पर नहीं दिखा:

<div class="..." ng-show="showPopup" ng-if="popupReady">

बाद में मैंने एक टाइमआउट के साथ इस निर्देश के जिम्मेदार नियंत्रक में इनिशियलाइज़ेशन जोड़ा:

$timeout(function () {
    $scope.popupReady = true;
});

इस तरह मैंने टिमटिमाते हुए मुद्दे को खत्म कर दिया और हर एक क्लिक पर DOM सम्मिलन के महंगे संचालन से बचा। यह एक के बजाय एक ही उद्देश्य के लिए दो स्कोप वैरिएबल का उपयोग करने की कीमत पर आया था, लेकिन अभी तक यह निश्चित रूप से सबसे अच्छा विकल्प है।

Answer 25

कोशिश की, ng-cloakलेकिन अभी भी संक्षिप्त झपकी। नीचे कोड उन्हें पूरी तरह से छुटकारा।

<body style="display:none;" ng-style="{'display':'block'}">

Answer 26

ऊपर सूचीबद्ध किसी भी समाधान ने मेरे लिए काम नहीं किया। मैंने तब वास्तविक कार्य को देखने का फैसला किया और महसूस किया कि जब "$ स्कोप.वच" को निकाल दिया गया था, तो यह नाम फ़ील्ड में एक मूल्य डाल रहा था जो कि मामला नहीं था। इसलिए कोड में मैंने सेट किया और पुरानेवैल्यू और फिर नयावैल्यू

$scope.$watch('model.value', function(newValue, oldValue) {
if (newValue !== oldValue) {
validateValue(newValue);
}
});

अनिवार्य रूप से जब इस मामले में गुंजाइश.चौपाई निकाल दी जाती है, तो AngularJS नाम चर (model.value) में परिवर्तन की निगरानी करता है

Answer 27

मैं <ul>एक के साथ लपेटता हूँ<div ng-cloak>

Comments

उसे लपेटने की आवश्यकता नहीं होनी चाहिए <ul>। ng-cloakयह जिस भी तत्व पर लागू होगा, और साथ ही उस तत्व के वंशज होंगे।

— btford

Answer 28

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

क्या हुआ करता था? <div class="options-modal" ng-show="showOptions"></div>

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

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

Answer 29

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

<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';">