Angularjs - องค์ประกอบ ng-cloak / ng-show กะพริบ

ฉันมีปัญหาใน angular.js ด้วยคำสั่ง / คลาสng-cloakหรือng-showหรือ

Chrome ทำงานได้ดี แต่ Firefox ที่เป็นสาเหตุของการกระพริบขององค์ประกอบที่มีหรือng-cloak ng-showIMHO เกิดจากการแปลงng-cloak/ ng-showเป็นstyle="display: none;"อาจเป็นคอมไพเลอร์ javascript ของ Firefox ช้าลงเล็กน้อยดังนั้นองค์ประกอบจะปรากฏขึ้นชั่วขณะหนึ่งแล้วซ่อน

ตัวอย่าง:

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

แม้ว่าเอกสารไม่ได้กล่าวถึง แต่อาจไม่เพียงพอที่จะเพิ่มdisplay: none;กฎลงใน CSS ของคุณ ในกรณีที่คุณกำลังโหลด angular.js ในเนื้อหาหรือเทมเพลตที่ไม่ได้รวบรวมเร็วพอให้ใช้ng-cloakคำสั่งและรวมถึงต่อไปนี้ใน CSS ของคุณ:

/* 
  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องค์ประกอบ 'ed ของคุณ

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

ดังนั้นหากคุณรวมกฎง่ายๆdisplay: none;กฎของ Bootstrap จะมีความสำคัญกว่าและdisplayจะตั้งเป็นblockดังนั้นคุณจะเห็นการสั่นไหวก่อนที่แม่แบบจะรวบรวม

ในฐานะที่เป็นที่กล่าวถึงในเอกสารคุณควรเพิ่มกฎเพื่อ CSS ของคุณที่จะซ่อนมันอยู่บนพื้นฐานของng-cloakแอตทริบิวต์:

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

เราใช้ลูกเล่นที่คล้ายกันในเว็บไซต์ "สร้างด้วยเชิงมุม" ซึ่งคุณสามารถดูแหล่งที่มาของบน Github ได้ที่: https://github.com/angular/builtwith.angularjs.org

หวังว่าจะช่วย!

ตรวจสอบให้แน่ใจว่า AngularJS รวมอยู่ในheadHTML ดูเอกสาร ngCloak :

เพื่อให้ได้ผลลัพธ์ที่ดีที่สุดสคริปต์ angular.js จะต้องโหลดในส่วนหัวของไฟล์ html หรือมิฉะนั้นต้องรวมกฎ css (ด้านบน) ไว้ในสไตล์ชีทภายนอกของแอปพลิเคชัน

ฉันไม่เคยมีโชคมากที่ใช้ ngCloak ฉันยังคงกระพริบแม้จะมีทุกอย่างที่กล่าวไว้ข้างต้น วิธีเดียวที่หลีกเลี่ยงไม่ได้สะบัดคือการใส่เนื้อหาของคุณในแม่แบบและรวมถึงแม่แบบ ใน SPA HTML เดียวที่จะได้รับการประเมินก่อนที่จะรวบรวมโดย Angular คือหน้า index.html หลักของคุณ

เพียงนำทุกอย่างเข้าไปในร่างกายและติดไว้ในไฟล์แยกต่างหากจากนั้น:

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

คุณไม่ควรริบหรี่เช่นนั้นเพราะ Angular จะรวบรวมเทมเพลตก่อนที่จะเพิ่มลงใน DOM

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>

นอกจากคำตอบที่ยอมรับแล้วหากคุณใช้วิธีการอื่นในการกระตุ้น ng-cloak ...

คุณอาจต้องการเพิ่มความพิเศษเพิ่มเติมให้กับ CSS / LESS ของคุณ:

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

ฉันมีปัญหาที่คล้ายกันและพบว่าหากคุณมีคลาสที่มีการเปลี่ยนองค์ประกอบจะกะพริบ ฉันพยายามเพิ่ม ng-cloak ไม่สำเร็จ แต่ด้วยการลบการเปลี่ยนปุ่มหยุดกะพริบ

ฉันใช้อิออนเฟรมเวิร์กและโครงปุ่มมีการเปลี่ยนแปลงนี้

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

เพียงเขียนทับคลาสเพื่อลบการเปลี่ยนแปลงและปุ่มจะหยุดกระพริบ

ปรับปรุง

อิออนอีกครั้งมีการสั่นไหวเมื่อใช้ ng-show / ng-hide การเพิ่ม CSS ต่อไปนี้จะช่วยแก้ไข:

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

ที่มา: http://forum.ionicframework.com/t/beta-14-ng-hide-show/14270/9

ฉันมีปัญหาที่ไหน <div ng-show="expression">จะปรากฏเป็นครั้งแรกในเวลาเพียงเสี้ยววินาทีแม้ว่า "การแสดงออก" นั้นผิดพลาดในขั้นต้นก่อนที่คำสั่ง ng-show จะมีโอกาสวิ่ง

วิธีแก้ปัญหาที่ฉันใช้คือการเพิ่มคลาส "ng-hide" ด้วยตนเอง<div ng-show="expression" ng-hide>เพื่อให้แน่ใจว่ามันเริ่มถูกซ่อนในตอนแรก คำสั่ง ng-show จะเพิ่ม / ลบคลาส ng-hide ตามความจำเป็นหลังจากนั้น

ลองปิด FirebugFirebug ฉันจริงจัง สิ่งนี้จะช่วยในกรณีของฉัน

ใช้คำตอบที่ยอมรับแล้วตรวจดูให้แน่ใจว่าFirebugใน Firefox ของคุณปิดอยู่ : กด F12 จากนั้นปิด Firebug สำหรับหน้านี้ - ปุ่มเล็ก ๆ ที่มุมบนขวา

จริงๆแล้วมีปัญหาสองอย่างที่แยกจากกันซึ่งอาจทำให้เกิดปัญหาการกะพริบ

ปัญหาที่ 1: ใช้เสื้อคลุม - สายเกินไป

ปัญหานี้ได้รับการแก้ไขเนื่องจากมีคำตอบมากมายในหน้านี้เพื่อให้แน่ใจว่ามีการโหลด AngularJS ไว้ในส่วนหัว ดูเอกสาร ngCloak :

เพื่อให้ได้ผลลัพธ์ที่ดีที่สุดสคริปต์ angular.js จะต้องโหลดในส่วนหัวของไฟล์ html หรือมิฉะนั้นต้องรวมกฎ css (ด้านบน) ไว้ในสไตล์ชีทภายนอกของแอปพลิเคชัน

ปัญหาที่ 2: เอา ng-cloak ออกเร็วเกินไป

ปัญหานี้มักเกิดขึ้นเมื่อคุณมี CSS จำนวนมากบนหน้าเว็บของคุณโดยมีกฎเรียงซ้อนกันและ CSS ของเลเยอร์ที่ลึกขึ้นก่อนที่จะมีการใช้เลเยอร์ด้านบน

โซลูชัน jQuery ในคำตอบที่เกี่ยวข้องกับการเพิ่มstyle="display:none"องค์ประกอบของคุณจะแก้ปัญหานี้ตราบใดที่สไตล์ถูกลบออกช้าพอ (อันที่จริงแล้วโซลูชันเหล่านี้แก้ปัญหาทั้งสองได้) อย่างไรก็ตามหากคุณไม่ต้องการเพิ่มสไตล์ลงใน HTML ของคุณโดยตรงคุณสามารถใช้ผลลัพธ์เดียวกันได้ng-showได้

เริ่มต้นด้วยตัวอย่างจากคำถาม:

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

เพิ่มกฎ ng-show เพิ่มเติมให้กับองค์ประกอบของคุณ:

<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เป็นปัญหาที่ OP กำลังกดปุ่ม แต่คนอื่น ๆ พบว่าวิธีการแก้ปัญหาไม่ทำงานหรือทำงานเพียงบางส่วนเพราะพวกเขากำลังตีปัญหา 2แทนหรือดีกว่า

หมายเหตุสำคัญ:ต้องแน่ใจว่าใช้วิธีแก้ปัญหากับเสื้อคลุมทั้งสองที่ใช้งานช้าเกินไปและลบออกในไม่ช้า การแก้ไขปัญหาเหล่านี้เพียงข้อเดียวอาจไม่ช่วยบรรเทาอาการได้

เราพบปัญหานี้ที่ บริษัท ของเราและแก้ไขมันด้วยการเพิ่ม "display: none" ใน CSS style สำหรับองค์ประกอบ ng-show ที่กระพริบ เราไม่ต้องใช้ NG-cloak เลย ซึ่งแตกต่างจากคนอื่น ๆ ในหัวข้อนี้เรามีประสบการณ์เรื่องนี้ใน Safari แต่ไม่ Firefox หรือ Chrome - อาจเนื่องมาจากข้อผิดพลาดของ Safari ทาสีขี้เกียจใน iOS7

สำหรับสิ่งที่คุ้มค่าฉันมีปัญหาที่คล้ายกัน ng-cloak ไม่ทำงาน อาจเป็นการตรวจสอบแอป / ไซต์ของคุณด้วยการเปิดใช้งานแคชเพื่อนำไฟล์ต้นฉบับมาใช้ใหม่เพื่อดูว่ามีประโยชน์หรือไม่

เมื่อรันไทม์ด้วยการกะพริบฉันกำลังทดสอบด้วย DevTools ที่เปิดอยู่และปิดใช้งานแคช การปิดพาเนลปิดโดยเปิดใช้งานการแคชช่วยแก้ไขปัญหาของฉัน

การรักษาข้อความด้านล่างในแท็กหัวแก้ไขปัญหานี้

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

เอกสารอย่างเป็นทางการ

ฉันไม่สามารถใช้วิธีการเหล่านี้ได้ดังนั้นฉันจึงทำสิ่งต่อไปนี้ในที่สุด สำหรับองค์ประกอบที่คุณต้องการซ่อนในตอนแรก:

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

จากนั้นในตัวควบคุมของคุณเพิ่มที่นี่หรือใกล้ด้านบน:

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

วิธีนี้องค์ประกอบจะถูกซ่อนในตอนแรกและจะแสดงเฉพาะเมื่อรหัสคอนโทรลเลอร์นั้นทำงานจริง

คุณสามารถปรับตำแหน่งให้ตรงกับความต้องการของคุณหรืออาจเพิ่มตรรกะบางอย่าง ในกรณีของฉันฉันสลับไปยังเส้นทางการเข้าสู่ระบบหากไม่ได้เข้าสู่ระบบในปัจจุบันและไม่ต้องการให้อินเทอร์เฟซของฉันกะพริบล่วงหน้าดังนั้นฉันจึงตั้งค่า$scope.styleหลังจากการตรวจสอบการเข้าสู่ระบบ

มันเป็นเรื่องดีที่จะใช้แทนng-if ลบและสร้างองค์ประกอบใหม่ใน DOM อย่างสมบูรณ์และช่วยหลีกเลี่ยงการแสดง ng-กะพริบng-showng-if

ฉันใช้อิออนเฟรมเวิร์กการเพิ่มสไตล์ css อาจไม่ทำงานในบางสถานการณ์คุณสามารถลองใช้ ng-if แทน ng-show / ng-hide

ref: https://books.google.com.my/books?id=-_5_CwAAQBAJ&pg=PA138&lpg=PA138&dq=v&&&qq8vy&&&&& แหล่งที่มาของข้อมูล = onepage & q = NG-แสดง 20hide%%% 20flickering 20in% 20ios & F = false

คุณควรอ้างอิงเอกสารเชิงมุมดีกว่าเนื่องจากรุ่น [1.4.9] มีการอัปเดตเป็นด้านล่างซึ่งทำให้สามารถรองรับคำสั่ง data-ng-cloak

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

ฉันลองใช้วิธีแก้ปัญหา ng-cloak ด้านบน แต่ก็ยังมีปัญหาเป็นระยะ ๆ กับ Firefox วิธีแก้ปัญหาเดียวที่ใช้งานได้สำหรับฉันคือการโหลดแบบฟอร์มล่าช้าจนกว่า Angular จะถูกโหลดจนเต็ม

ฉันเพิ่งเพิ่ม ng-init ในแอพและใช้ ng-if ที่ด้านรูปแบบเพื่อตรวจสอบว่าตัวแปรที่ฉันตั้งไว้โหลดแล้ว

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

นอกเหนือจากคำตอบอื่น ๆ หากคุณพบว่าแฟลชของรหัสเทมเพลตยังคงเกิดขึ้นเป็นไปได้ว่าคุณมีสคริปต์ที่ด้านล่างของหน้าเว็บและนั่นหมายความว่าคำสั่ง ng-cloak จะไม่ทำงาน คุณสามารถย้ายสคริปต์ของคุณไปที่ส่วนหัวหรือสร้างกฎ CSS

เอกสารกล่าวว่า "เพื่อผลลัพธ์ที่ดีที่สุดสคริปต์ angular.js จะต้องโหลดในส่วนหัวของเอกสาร html หรือมิฉะนั้นกฎ css ด้านบนจะต้องรวมอยู่ในสไตล์ชีตภายนอกของแอปพลิเคชัน"

ตอนนี้ไม่จำเป็นต้องเป็นสไตล์ชีทภายนอก แต่เป็นองค์ประกอบในส่วนหัว

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

แหล่งที่มา: https://docs.angularjs.org/api/ng/directive/ngCloak

ฉันลองทุกวิธีแก้ไขปัญหาที่โพสต์ที่นี่และยังคงกะพริบใน Firefox

ถ้ามันช่วยทุกคนฉันแก้ไขมันด้วยการเพิ่มstyle="display: none;"div เนื้อหาหลักจากนั้นใช้ jQuery (ฉันใช้มันในหน้านั้นอยู่แล้ว) $('#main-div-id').show();เมื่อทุกอย่างถูกโหลดหลังจากรับข้อมูลจากเซิร์ฟเวอร์

ฉันพบข้อเสนอแนะจากบันทึกการใช้เว็บของ Rick Strahlแก้ไขปัญหาของฉันได้อย่างสมบูรณ์แบบ (เนื่องจากฉันยังมีปัญหาแปลก ๆ กับ ng-cloak กระพริบ raw {{code}} ครั้งโดยเฉพาะอย่างยิ่งในขณะที่ใช้ Firebug):

ตัวเลือกนิวเคลียร์: การซ่อนเนื้อหาด้วยตนเอง

การใช้ CSS อย่างชัดเจนเป็นตัวเลือกที่ดีที่สุดดังนั้นจึงไม่จำเป็นต้องมีสิ่งต่อไปนี้ แต่ฉันจะพูดถึงที่นี่เนื่องจากให้ข้อมูลเชิงลึกเกี่ยวกับวิธีที่คุณสามารถซ่อน / แสดงเนื้อหาด้วยตนเองขณะโหลดสำหรับเฟรมเวิร์กอื่นหรือในเทมเพลตที่ใช้มาร์กอัปของคุณเอง

ก่อนที่ฉันจะค้นพบว่าฉันสามารถฝังสไตล์ CSS ลงในหน้าฉันได้พยายามคิดว่าทำไม ng-cloak ไม่ทำงาน หลังจากเสียเวลาหนึ่งชั่วโมงไปถึงไหนฉันก็ตัดสินใจซ่อนและแสดงภาชนะด้วยตนเอง แนวคิดนี้ง่าย - เริ่มแรกซ่อนคอนเทนเนอร์จากนั้นแสดงเมื่อ Angular ทำการประมวลผลเริ่มต้นและการลบมาร์กอัปเทมเพลตออกจากหน้า

คุณสามารถซ่อนเนื้อหาด้วยตนเองและทำให้สามารถมองเห็นได้หลังจาก Angular มีการควบคุม เมื่อต้องการทำสิ่งนี้ฉันใช้:

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

สังเกตการแสดงผล: ไม่มีสไตล์ที่ซ่อนอิลิเมนต์ในหน้าเริ่มต้นอย่างชัดเจน

จากนั้นเมื่อ Angular เรียกใช้การเริ่มต้นและประมวลผลมาร์กอัปแม่แบบบนหน้าอย่างมีประสิทธิภาพคุณสามารถแสดงเนื้อหา สำหรับ Angular เหตุการณ์ 'พร้อม' นี้คือฟังก์ชัน app.run ():

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

สิ่งนี้จะลบการแสดงผลอย่างมีประสิทธิภาพ: ไม่มีสไตล์และเนื้อหาจะปรากฏขึ้น เมื่อเวลา app.run () ยิง DOM ก็พร้อมที่จะแสดงด้วยข้อมูลที่กรอกหรืออย่างน้อยข้อมูลว่างเปล่า - Angular มีการควบคุม

ฉันลองคำตอบทั้งหมดข้างต้นแล้วก็ไม่ทำงานเลย การใช้ไอออนิกในการพัฒนาแอพไฮบริดและพยายามทำให้ข้อความแสดงข้อผิดพลาดไม่กะพริบ ฉันสิ้นสุดการแก้ไขปัญหาโดยเพิ่มคลาส ng-hide ในองค์ประกอบของฉัน div ของฉันมี ng-show แสดงองค์ประกอบเมื่อมีข้อผิดพลาด การเพิ่ม ng-hide ให้ตั้งค่า div เป็นไม่แสดงก่อนที่จะโหลดเชิงมุม ไม่จำเป็นต้องสวมเสื้อคลุมหรือเพิ่มมุมเข้าที่ศีรษะ

จากการสนทนาข้างต้น

[ng-cloak] {
                display: none;
            }

เป็นวิธีที่สมบูรณ์แบบในการแก้ปัญหา

ฉันใช้ ng-show ในคำสั่งเพื่อแสดงและซ่อนป๊อปอัป

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

ไม่มีข้อใดถูกใช้งานได้สำหรับฉันและการใช้ ng-if แทนที่จะเป็น ng-show จะเป็น overkill นั่นหมายความว่าจะลบและเพิ่มเนื้อหาป๊อปอัปทั้งหมดใน DOM ทุกคลิกเดียว แต่ฉันเพิ่ม ng-if ลงในองค์ประกอบเดียวกันเพื่อให้แน่ใจว่าไม่ได้แสดงที่การโหลดเอกสาร:

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

หลังจากนั้นฉันเพิ่มการเริ่มต้นลงในคอนโทรลเลอร์ที่รับผิดชอบคำสั่งนี้ด้วยการหมดเวลา:

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

วิธีนี้ฉันกำจัดปัญหาการกะพริบและหลีกเลี่ยงการแทรก DOM ในราคาแพงทุกการคลิก นี่เป็นค่าใช้จ่ายในการใช้ตัวแปรขอบเขตสองตัวสำหรับวัตถุประสงค์เดียวกันแทนที่จะเป็นหนึ่งเดียว แต่จนถึงตอนนี้นี่เป็นตัวเลือกที่ดีที่สุด

พยายามng-cloakแต่กระพริบสั้น ๆ รหัสด้านล่างกำจัดพวกเขาอย่างสมบูรณ์

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

วิธีการแก้ปัญหาที่กล่าวข้างต้นไม่ได้ผลสำหรับฉัน จากนั้นฉันตัดสินใจที่จะดูฟังก์ชั่นที่เกิดขึ้นจริงและตระหนักว่าเมื่อ "$ scope.watch" ถูกไล่ออกมันก็ใส่ค่าลงในช่องชื่อที่ไม่ได้ตั้งใจ ดังนั้นในรหัสที่ฉันตั้งและเก่ามูลค่าและใหม่มูลค่าแล้ว

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

เป็นหลักเมื่อมีการใช้งาน scope.watch ในกรณีนี้ AngularJS จะตรวจสอบการเปลี่ยนแปลงตัวแปรชื่อ (model.value)

ฉันจะห่อ<ul>ด้วย<div ng-cloak>

ผมเองตัดสินใจที่จะใช้แอตทริบิวต์มากกว่าng-class ng-showฉันประสบความสำเร็จมากขึ้นในการดำเนินการตามเส้นทางนี้โดยเฉพาะอย่างยิ่งสำหรับหน้าต่างป๊อปอัปที่ไม่ได้แสดงตามค่าเริ่มต้นเสมอ

สิ่งที่เคยเป็น <div class="options-modal" ng-show="showOptions"></div>

ตอนนี้: <div class="options-modal" ng-class="{'show': isPrintModalShown}">

ด้วย CSS สำหรับคลาส options-modal ที่เป็นdisplay: noneค่าเริ่มต้น คลาสการแสดงมีdisplay:blockCSS

หลีกเลี่ยงการขึ้นบรรทัดใหม่

<meta http-equiv="Content-Security-Policy"              content="
default-src 'FOO';   
script-src 'FOO';    
style-src  'FOO'; 
font-src 'FOO';">

ทำงานได้กับ Firefox 45.0.1

<meta http-equiv="Content-Security-Policy"              content="    default-src 'FOO';    script-src 'FOO';     style-src  'FOO';    font-src 'FOO';">