Angular.js ডকুমেন্টটি সংকলন / ইন্টারপোলিটের পূর্বে ক্ষণে ক্ষণে প্রদর্শন করা থেকে ডাবল কোঁকড়া ধনুর্বন্ধক চিহ্ন চিহ্নিত করুন


298

এটি প্রাথমিকভাবে আইই-তে একটি সমস্যা বলে মনে হচ্ছে যখন লোড করার জন্য অনেকগুলি চিত্র / স্ক্রিপ্ট থাকে, {{stringExpression}}মার্কআপে আক্ষরিক প্রদর্শিত হয় সেখানে বেশিরভাগ সময় থাকতে পারে, তার সংকলন / অন্তরঙ্গকরণের সাথে কৌনিকটি শেষ হয়ে গেলে অদৃশ্য হয়ে যায় দলিল.

এটির কেন এমন কোনও সাধারণ কারণ আছে যা ইঙ্গিত দেয় যে আমি সাধারণত কিছু ভুল করছি, বা এটি রোধ করার কোনও উপায় আছে?


6
এটি সহায়তা করতে পারে: ব্রাঞ্চচন্ডবাউন্ড.নেট
ইসমাইল

উত্তর:


283

আমি মনে করি আপনি এই ngCloakনির্দেশটি সন্ধান করছেন: https://docs.angularjs.org/api/ng/directive/ngCloak

ডকুমেন্টেশন থেকে:

আপনার অ্যাপ্লিকেশনটি লোড হওয়ার সময় কৌনিক এইচটিএমএল টেমপ্লেটটি তার কাঁচা (আবদ্ধ) ফর্মটিতে সংক্ষিপ্তভাবে প্রদর্শিত হওয়া থেকে বিরত রাখতে এনজিক্লাক নির্দেশিকা ব্যবহার করা হয়। এইচটিএমএল টেমপ্লেট প্রদর্শন দ্বারা সৃষ্ট অবাঞ্ছিত ঝলকানি এড়ানোর জন্য এই নির্দেশিকাটি ব্যবহার করুন।

নির্দেশটি <body>উপাদানটিতে প্রয়োগ করা যেতে পারে , তবে পছন্দসই ব্যবহারটি হ'ল ngCloak ব্রাউজার দর্শনের প্রগতিশীল রেন্ডারিংয়ের অনুমতি দেওয়ার জন্য পৃষ্ঠার ছোট অংশগুলিতে একাধিক নির্দেশনা প্রয়োগ করা


1
কাঁচা কৌণিক এইচটিএমএল কোড এড়ানোর জন্য, কি ngCloakবিস্তৃত / সেরা অনুশীলন? এটি কোনও মস্তিষ্কের মতো মনে হয় তবে আমি AngularJS তে অভিজ্ঞ নই।
কেভিন মেরিডিথ

32
আমি মনে করি না আপনি যদি শরীরের শেষে সমস্ত স্ক্রিপ্টগুলি লোড করেন তবে এটি কাজ করবে।
trusktr

8
অহ, অপেক্ষা করুন, এনভিএম, শেষ স্ক্রিপ্টগুলি লোড করা থাকলে LOAS- র উত্তর হ'ল সমাধান। .Ng-cloak ক্লাসটি ব্যবহার করুন।
trusktr

3
কার্যকর হওয়ার <head>জন্য আপনার এইচটিএমএল বিভাগে অ্যাঙ্গুলার স্ক্রিপ্ট লোড করুন ngCloak
মোস্তফা

1
আমি নিশ্চিত করছি তা ঠিকভাবে কাজ যদি আমি লোড angular.jsমধ্যে <head>আমার পৃষ্ঠার অধ্যায়।
অ্যারন লরিঞ্জ ২

197

এছাড়াও, আপনি এর <span ng-bind="hello"></span>পরিবর্তে ব্যবহার করতে পারেন {{hello}}

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


94
এনজি-বাইন্ড সম্পর্কে একটি বৈশিষ্ট্য যা মাঝে মাঝে উপেক্ষা করা হয় তা হ'ল অ্যাংুলার লোড হওয়ার সময় আপনি প্রদর্শিত পাঠ্য নির্দিষ্ট করতে পারেন: <span ng-bind = "myScopeProperty"> লোড হচ্ছে ... </ span>। "লোডিং ..." প্রদর্শিত হবে, তারপরে মাইস্কোপপ্রটিটির সংজ্ঞা দেওয়া হলে প্রতিস্থাপন করা হবে।
রাজকোক

@ মারকরাজাকোক: টিপটির জন্য ধন্যবাদ! আমার কোন ধারণা ছিল না. এটি খুব সহজ এবং মার্জিত এবং আমি নিজেই যে সমস্যার সমাধান করেছি তা সমাধান করে।
জিম রাদেন

9
আপনার যদি একাধিক এক্সপ্রেশন প্রয়োজন হয় তবে এনজিবিন্ডটেম্পলেট ব্যবহার করুন। যেমন, <বিঘত NG-বেঁধে-টেমপ্লেট = "{{scopeProperty1}} {{scopeProperty2}}"> লোডিং ... </ span> এ
মার্ক Rajcok

27
আপনি {{হ্যালো || 'লোড হচ্ছে ...'}}
অ্যান্ড্রু জোসলিন

5
নিবন্ধন করুন এই পদ্ধতির সাথে, পৃষ্ঠাটি লোড হওয়ার পরে flash {}} অভিব্যক্তিটি ঝলকানি থেকে বাঁচতে পৃষ্ঠার নীচের বিপরীতে কৌণিক জেএস স্ক্রিপ্টটি মাথায় থাকা দরকার।
s_t_e_v_e

51

স্ক্রিপ্টগুলি সর্বশেষে লোড করা হয় যখন ক্লাস = 'এনজি-ক্লোকার' পদ্ধতির কার্যকারিতা উন্নত করতে, নথির শিরোনামে নিম্নলিখিত সিএসএস লোড হয়েছে তা নিশ্চিত করুন:

.ng-cloak { display:none; }

4
যোগ করা গুরুত্বপূর্ণ! খারাপ ধারণাও নয়।
ইমারোফ

12
visibility: hiddenভাল হবে না ?
এমপেন

2
@ ইওমরফ, তবে কোনও শৈলীর বাছাই করার জন্য প্রচার !importantকরা কোনও সিএসএস হ্যাক (খারাপ জিনিস), তাই না? এটি সিএসএস নির্বাচনকারী বিধিগুলি ভঙ্গ করে।
কেভিন মেরেডিথ

5
আইএমএইচও এটি অন্যতম একটি মামলা!
lex82

3
@ মার্ক আমি অনুমান করব যে "দৃশ্যমানতা: লুকানো" এখনও টেমপ্লেট মার্কআপের জন্য প্রয়োজনীয় স্থান সরবরাহ করবে, যেখানে "প্রদর্শন: কিছুই নয়" কিছুই রেন্ডার করে না। কেবল দৃশ্যমানতা লুকানো থাকলে, কোনও বাহ্যিক উপাদান হঠাৎ করে কিছুই থেকে আকারে বাড়ার পরিবর্তে সত্যিকারের অভ্যন্তরের আকারে পতিত হতে পারে। আমি মনে করি এটি যেটি পছন্দ করে। :)
জেমস উইলকিন্স

40

কেবল পৃষ্ঠার শিরোনামে বা আপনার সিএসএস ফাইলগুলির মধ্যে ক্লকিং সিএসএস যুক্ত করুন:

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

তারপরে আপনি সাধারণ কৌণিক অনুশীলন অনুসারে এনজি ক্লক নির্দেশিকাটি ব্যবহার করতে পারেন এবং এটি কৌণিক নিজে লোড হওয়ার আগেও এটি কাজ করবে।

এটি কৌণিকটি ঠিক তাই করে: কৌণিক.জেএস এর শেষে কোডটি পৃষ্ঠার শীর্ষে সিএসএসের উপরের বিধিগুলিকে যুক্ত করে।


+1 আমি [ngcloak]নিজেই নির্বাচকটির সাথে এসেছি , তবে এটি আরও সম্পূর্ণ।
পিয়ের হেনরি

1
দুর্দান্ত উত্তর! আমি আমার শরীরের শেষে কৌনিকটি লোড করি, তাই এনজিক্লোক উপলব্ধ হয় না এবং এটি এখনও fla {}} ঝলকান} এটি এটি স্থির করে।
স্কটি

21

আপনার সিএসএসে ফলোলিং যোগ করুন

[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

আমি @ পকোজলোস্কি.পেনসোর্স উত্তরের সাথে একমত, তবে এনজি-রিপিট সহ এনজি-ক্লক ক্লাসটি আমার পক্ষে কাজ করে নি। সুতরাং আমি আপনাকে del {name} like এবং এনজি-পুনরাবৃত্তির জন্য এনজি ক্লক নির্দেশকের মতো সরল সীমানা প্রকাশের জন্য ক্লাস ব্যবহার করার পরামর্শ দিতে চাই।

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

এবং

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

আমার ভুলটি লক্ষ্য করার জন্য ধন্যবাদ
জাইসন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.