ป้องกันไม่ให้เครื่องหมายปีกการั้งสองครั้งปรากฏขึ้นชั่วขณะก่อนที่ angular.js จะคอมไพล์ / แทรกเอกสาร

298

ดูเหมือนว่าจะเป็นปัญหาหลักใน IE เมื่อมีรูปภาพ / สคริปต์จำนวนมากที่จะโหลดอาจมีระยะเวลาที่จะแสดงตัวอักษร{{stringExpression}}ในมาร์กอัปแล้วหายไปเมื่อทำมุมกับการรวบรวม / การแก้ไขของ เอกสาร

มีเหตุผลทั่วไปหรือไม่ที่ทำให้สิ่งนี้เกิดขึ้นซึ่งบ่งบอกว่าฉันกำลังทำอะไรผิดปกติหรือมีวิธีป้องกันไม่ให้เกิดขึ้น?

angularjs

— JeremyWeir
แหล่งที่มา

6

สิ่งนี้อาจช่วยได้: branchandbound.net/blog/web/2013/08/some-angularjs-pitfalls

— Ismael

ข้างต้นเป็นทางออกที่ถูกต้อง

— Edmund Rojas

283

ฉันคิดว่าคุณกำลังมองหาngCloakคำสั่ง: https://docs.angularjs.org/api/ng/directive/ngCloak

จากเอกสาร:

คำสั่ง ngCloak ใช้เพื่อป้องกันไม่ให้เทมเพลต Angular html แสดงเบราว์เซอร์ในรูปแบบ raw (uncompiled) ในขณะที่แอปพลิเคชันของคุณกำลังโหลด ใช้คำสั่งนี้เพื่อหลีกเลี่ยงผลกระทบการสั่นไหวที่ไม่พึงประสงค์ที่เกิดจากการแสดงแม่แบบ html

คำสั่งสามารถนำไปใช้กับ<body>องค์ประกอบ แต่การใช้งานที่ต้องการคือการใช้หลายngCloak คำสั่งกับส่วนเล็ก ๆ ของหน้าเพื่อให้การแสดงผลแบบก้าวหน้าของมุมมองเบราว์เซอร์

— pkozlowski.opensource
แหล่งที่มา

1

เพื่อหลีกเลี่ยงโค้ด HTML Angular แบบดิบมีngCloakวิธีการปฏิบัติที่ดีที่สุดหรือไม่ ดูเหมือนว่าจะเป็นเกมง่ายๆ แต่ฉันไม่มีประสบการณ์ใน AngularJS

— เควินเมเรดิ ธ

32

ฉันไม่คิดว่ามันจะทำงานถ้าคุณโหลดสคริปต์ทั้งหมดที่ส่วนท้ายของร่างกาย

— trusktr

8

ใช่รอ nvm คำตอบของ LOAS เป็นวิธีแก้ปัญหาถ้าคุณโหลดสคริปต์ครั้งสุดท้าย ใช้คลาส .ng-cloak

— trusktr

3

โหลดสคริปต์ angularjs ที่<head>ส่วนของ html ของคุณเพื่อngCloakให้มีประสิทธิภาพ

— มุสตาฟา

1

ฉันสามารถยืนยันได้ว่าทำงานได้อย่างสมบูรณ์ถ้าฉันโหลดangular.jsใน<head>ส่วนของหน้าของฉัน

— Aron Lorincz

197

นอกจากนี้คุณยังสามารถใช้แทน{{hello}}

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

— Andrew Joslin
แหล่งที่มา

94

คุณลักษณะหนึ่งเกี่ยวกับ ng-bind ที่บางครั้งถูกมองข้ามคือคุณสามารถระบุข้อความที่จะแสดงขณะที่ Angular กำลังโหลด: กำลังโหลด ... "กำลังโหลด ... " จะปรากฏขึ้นจากนั้นจะถูกแทนที่เมื่อมีการกำหนด myScopeProperty

— Mark Rajcok

@ MarkRajcok: ขอบคุณสำหรับเคล็ดลับ! ฉันไม่มีความคิดเห็น. นั่นเป็นเรื่องที่เรียบง่ายและสง่างามและแก้ปัญหาที่ฉันมีอยู่

— Jim Raden

9

หากคุณต้องการนิพจน์หลายตัวให้ใช้ ngBindTemplate ตัวอย่างเช่น กำลังโหลด ...

— ทำเครื่องหมาย Rajcok

27

คุณสามารถทำได้ {{hello ||] 'loading ... '}}

— Andrew Joslin

5

@AndyJoslin Nice ด้วยวิธีนี้สคริปต์ angular js ต้องอยู่ในส่วนหัวตรงข้ามกับด้านล่างของหน้าเพื่อหลีกเลี่ยงการแสดงออก {{}} จากการกะพริบเมื่อโหลดหน้าเว็บ

— s_t_e_v_e

51

เพื่อปรับปรุงประสิทธิภาพของ class = 'ng-cloak' วิธีการเมื่อสคริปต์ถูกโหลดล่าสุดตรวจสอบให้แน่ใจว่า css ต่อไปนี้ถูกโหลดในส่วนหัวของเอกสาร:

.ng-cloak { display:none; }

— LOAS
แหล่งที่มา

4

การเพิ่ม! สำคัญไม่ใช่ความคิดที่เลว

— eomeroff

12

จะvisibility: hiddenดีกว่าไหม

— mpen

2

@eomeroff แต่!importantCSS แฮ็ค (สิ่งไม่ดี) เพื่อโปรโมตสไตล์ที่เลือกใช่ไหม? มันแบ่งกฎตัวเลือก CSS

— เควินเมเรดิ ธ

5

IMHO นี่เป็นหนึ่งในกรณีที่!

— lex82

3

@ ทำเครื่องหมายฉันจะเดาว่า "การมองเห็น: ซ่อนอยู่" จะยังคงทำให้พื้นที่ที่จำเป็นสำหรับมาร์กอัปแม่แบบในขณะที่ "จอแสดงผล: ไม่มี" ไม่แสดงอะไรเลย ด้วยการมองเห็นที่ซ่อนอยู่เท่านั้นองค์ประกอบภายนอกใด ๆ ก็อาจพังทลายลงมาสู่ขนาดภายในที่แท้จริงแทนการเติบโตขึ้นเป็นขนาดจากสิ่งใด ฉันคิดว่ามันเป็นสิ่งที่คนคนหนึ่งชอบ :)

— James Wilkins

40

เพียงเพิ่ม CSS ที่ซ่อนอยู่ในส่วนหัวของหน้าหรือหนึ่งในไฟล์ CSS ของคุณ:

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

จากนั้นคุณสามารถใช้คำสั่ง ngCloakตามแนวปฏิบัติของ Angular ปกติและมันจะทำงานได้ก่อนที่ Angular จะโหลดเอง

นี่คือสิ่งที่ Angular ทำได้: โค้ดที่ส่วนท้ายของ angular.js เพิ่มกฎ CSS ด้านบนไว้ที่ส่วนหัวของหน้า

— Bennett McElwee
แหล่งที่มา

+1 ฉันมาพร้อมกับ[ngcloak]ตัวเลือกด้วยตัวเอง แต่นี่เสร็จสมบูรณ์กว่า

— ปิแอร์เฮนรี่

1

คำตอบที่ยอดเยี่ยม! ฉันโหลดแองกูลาร์ที่ส่วนท้ายของร่างกายของฉันดังนั้น ngCloak จึงไม่สามารถใช้งานได้และมันยังคงกะพริบ {{}} มันคงที่

— Scottie

21

ใน css ของคุณเพิ่มการ folllowing

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

และในโค้ดของคุณคุณสามารถเพิ่มคำสั่ง ng-cloak ตัวอย่างเช่น,

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

แค่นั้นแหละ!

— Nathan Senevirathne
แหล่งที่มา

6

นอกจากนี้คุณยังสามารถใช้ng-attr-src="{{variable}}"แทนsrc="{{variable}}"และจะสร้างแอตทริบิวต์เฉพาะเมื่อคอมไพเลอร์รวบรวมแม่แบบ สิ่งนี้ถูกกล่าวถึงในเอกสารประกอบ: https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings

— Martin Schüller
แหล่งที่มา

3

ฉันเห็นด้วยกับ @ pkozlowski.opensource คำตอบ แต่คลาสนาฬิกา ng ไม่ทำงานสำหรับฉันที่ใช้กับ ng-repeat ดังนั้นฉันขอแนะนำให้คุณใช้คลาสสำหรับนิพจน์ตัวคั่นแบบง่ายเช่น {{name}} และคำสั่ง ngCloak สำหรับ ng-repeat

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

และ

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

— Jaison
แหล่งที่มา

ขอบคุณที่สังเกตเห็นความผิดพลาดของฉัน

— Jaison