कोणीय.js संकलित / प्रक्षेपित करने से पहले क्षण भर में प्रदर्शित करने से डबल घुंघराले ब्रेस नोटेशन को रोकें

298

यह मुख्य रूप से IE में एक मुद्दा प्रतीत होता है जब लोड करने के लिए कई चित्र / स्क्रिप्ट {{stringExpression}}होते हैं, तो समय की एक अच्छी मात्रा हो सकती है जहां मार्कअप में शाब्दिक प्रदर्शित होते हैं, फिर एक बार कोणीय के संकलन या प्रक्षेप के साथ हो जाने पर गायब हो जाते हैं दस्तावेज़।

क्या एक सामान्य कारण है कि ऐसा क्यों होता है जो यह संकेत देता है कि मैं आमतौर पर कुछ गलत कर रहा हूं, या क्या इसे रोकने के लिए कोई ज्ञात तरीका है?

angularjs

— JeremyWeir
स्रोत

6

यह मदद कर सकता है: branchandbound.net/blog/web/2013/08/some-angularjs-pitfalls

— Ismael

उपरोक्त सही समाधान था

— एडमंड रोज़ास

283

मुझे लगता है कि आप ngCloakनिर्देशन की तलाश कर रहे हैं : https://docs.angularjs.org/api/ng/directive/liveCak

प्रलेखन से:

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

निर्देश को <body>तत्व पर लागू किया जा सकता है , लेकिन पसंदीदा उपयोग ngCloak ब्राउज़र दृश्य के प्रगतिशील प्रतिपादन की अनुमति देने के लिए पृष्ठ के छोटे हिस्से में कई निर्देश लागू करने के लिए है

— pkozlowski.opensource
स्रोत

1

कच्चे कोणीय एचटीएमएल कोड से बचने के लिए, ngCloakव्यापक / सर्वोत्तम अभ्यास है? यह बिना दिमाग के लगता है, लेकिन मुझे AngularJS में कोई अनुभव नहीं है।

— केविन मेरेडिथ

32

मुझे नहीं लगता कि अगर आप शरीर के अंत में सभी स्क्रिप्ट लोड करते हैं तो यह काम करेगा।

— त्रिकुट्र

8

Aaah, Wait, nvm, LOAS का जवाब है अगर आप स्क्रिप्ट को आखिरी बार लोड करते हैं। .Ng-cloak वर्ग का उपयोग करें।

— त्रिकूट

3

प्रभावी होने के <head>लिए अपने html के अनुभाग में कोणीयज स्क्रिप्ट को लोड करें ngCloak।

— मुस्तफा

1

यदि मैं अपने पृष्ठ angular.jsके <head>अनुभाग में लोड करता हूं तो मैं इसकी पूरी तरह से पुष्टि कर सकता हूं।

— एरन लोरिंज़

197

इसके अलावा, आप के बजाय उपयोग कर सकते हैं {{hello}}।

http://jsfiddle.net/4LhN9/34/

— एंड्रयू जोसलिन
स्रोत

94

एनजी-बिंद के बारे में एक विशेषता जिसे कभी-कभी अनदेखा कर दिया जाता है वह यह है कि आप टेक्स्ट को यह प्रदर्शित करने के लिए निर्दिष्ट कर सकते हैं कि कोणीय लोड हो रहा है: loading ... । "लोड हो रहा है ..." दिखाई देगा, फिर myScopeProperty परिभाषित होने के बाद बदल दिया जाएगा।

— मार्क राजकॉक

@MarkRajcok: टिप के लिए धन्यवाद! मुझे पता नहीं था। यह बहुत ही सरल और सुरुचिपूर्ण है और एक समस्या है जो मैंने खुद की है।

— जिम रेडेन

9

यदि आपको कई भाव चाहिए, तो ngBindTemplate का उपयोग करें। जैसे, लोडिंग ...

— मार्क राजकॉक

27

आप भी {{हैलो || 'लोडिंग ...'}}

— एंड्रयू जोसलिन

5

@AndyJoslin अच्छा लगा। इस दृष्टिकोण के साथ, कोणीय js स्क्रिप्ट को पृष्ठ में लोड होने से {{}} अभिव्यक्ति से बचने के लिए पृष्ठ के नीचे के विपरीत, सिर में होना चाहिए।

— s_t_e_v_e

51

जब स्क्रिप्ट को अंतिम लोड किया जाता है, तब कक्षा = 'एनजी-क्लोक' दृष्टिकोण की प्रभावशीलता में सुधार करने के लिए, सुनिश्चित करें कि निम्नलिखित सीएसएस दस्तावेज़ के सिर में लोड किया गया है:

.ng-cloak { display:none; }

— Loas
स्रोत

4

जोड़ना महत्वपूर्ण भी बुरा विचार नहीं है।

— इरोमॉफ

12

visibility: hiddenबेहतर नहीं होगा ?

— एमपीएन

2

@eomeroff, लेकिन !importantएक सीएसएस हैक (बुरी चीज) है एक शैली को बढ़ावा देने के लिए चयन किया जाना है, है ना? यह CSS चयनकर्ता नियमों को तोड़ता है।

— केविन मेरेडिथ

5

IMHO यह मामलों में से एक है! के लिए महत्वपूर्ण पेश किया गया था।

— lex82

3

@ मार्क मुझे लगता है कि "दृश्यता: छिपी" अभी भी टेम्पलेट मार्कअप के लिए आवश्यक स्थान को प्रस्तुत करेगा, जबकि "प्रदर्शन: कोई नहीं" बिल्कुल भी कुछ भी प्रस्तुत नहीं करता है। केवल दृश्यता छिपी होने के कारण, कोई भी बाहरी तत्व अचानक से वास्तविक आकार में ढल सकता है, इसके बजाय आकार से कुछ भी नहीं बढ़ सकता है। मुझे लगता है कि यह जो भी पसंद करता है। :)

— जेम्स विल्किंस

40

केवल पृष्ठ के शीर्ष पर या अपनी सीएसएस फ़ाइलों में क्लोकिंग सीएसएस जोड़ें:

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

फिर आप सामान्य कोकुलर अभ्यास के अनुसार ngCloak निर्देश का उपयोग कर सकते हैं , और यह काम करेगा इससे पहले कि एंगुलर खुद लोड होता है।

यह वही है जो एंगुलर करता है: कोणीय.जे के अंत में कोड उपरोक्त सीएसएस नियमों को पेज के प्रमुख में जोड़ता है।

— बेनेट मैकलेवे
स्रोत

+1 मैं [ngcloak]स्वयं चयनकर्ता के साथ आया था , लेकिन यह अधिक पूर्ण है।

— पियरे हेनरी

1

बहुत बढ़िया जवाब! मैं अपने शरीर के अंत में कोणीय लोड करता हूं, इसलिए ngCloak उपलब्ध नहीं है और यह अभी भी {{}} चमकता है। यह तय किया।

— स्कूटी

21

अपने सीएसएस में folllowing जोड़ें

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

और फिर आप कोड में एनजी-क्लोक निर्देश जोड़ सकते हैं। उदाहरण के लिए,

<div ng-cloak>
   Welcome {{data.name}}
</div>

बस!

— नाथन सेनविरथने
स्रोत

6

आप ng-attr-src="{{variable}}"इसके बजाय का उपयोग भी कर सकते हैं src="{{variable}}"और एक बार संकलक को संकलित करने के बाद विशेषता उत्पन्न हो जाएगी। इसका उल्लेख यहाँ प्रलेखन में किया गया है: https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings

— मार्टिन शूलर
स्रोत

3

मैं @ pkozlowski.opensource जवाब से सहमत हूं, लेकिन एनजी-दोहराने के साथ उपयोग करने के लिए एनजी-क्लॉक क्लास ने मेरे लिए काम नहीं किया। इसलिए मैं आपको {{नाम}} जैसे सरल सीमांत अभिव्यक्ति के लिए कक्षा का उपयोग करने की सलाह देना चाहूंगा और एनजी-रिप्लाई के लिए एनक्लोव निर्देश भी दे सकता हूं।

<div class="ng-cloak">{{name}}<div>

तथा

<li ng-repeat="item in items" ng-cloak>{{item.name}}<li>

— jaison
स्रोत

मुझे गलती को

— नोटिस करने