Angularjs - elemen ng-cloak / ng-show berkedip

Saya punya masalah di angular.js dengan direktif / kelas ng-cloakatau ng-show.

Chrome berfungsi dengan baik, tetapi Firefox menyebabkan kedipan elemen dengan ng-cloakatau ng-show. IMHO itu disebabkan oleh konversi ng-cloak/ ng-showke style="display: none;", mungkin kompiler javascript Firefox sedikit lebih lambat, sehingga elemen muncul sebentar dan kemudian bersembunyi?

Contoh:

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

Meskipun dokumentasi tidak menyebutkannya, mungkin tidak cukup untuk menambahkan display: none;aturan ke CSS Anda. Dalam kasus di mana Anda memuat angular.js di tubuh atau template tidak segera dikompilasi, gunakan ng-cloakarahan dan sertakan yang berikut dalam CSS Anda:

/* 
  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;
}

Seperti yang disebutkan dalam komentar, !importantini penting. Misalnya, jika Anda memiliki markup berikut

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

dan Anda kebetulan menggunakan bootstrap.css, pemilih berikut ini lebih spesifik untuk ng-cloakelemen Anda

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

Jadi, jika Anda memasukkan aturan dengan sederhana display: none;, aturan Bootstrap akan diutamakan dan displayakan diatur ke block, jadi Anda akan melihat layar sebelum template dikompilasi.

Seperti disebutkan dalam dokumentasi , Anda harus menambahkan aturan ke CSS Anda untuk menyembunyikannya berdasarkan ng-cloakatribut:

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

Kami menggunakan trik serupa di situs "Dibangun dengan Angular", yang dapat Anda lihat sumbernya di Github: https://github.com/angular/builtwith.angularjs.org

Semoga itu bisa membantu!

Pastikan AngularJS termasuk dalam headHTML. Lihat dokumen ngCloak :

Untuk hasil terbaik, skrip angular.js harus dimuat di bagian kepala file html; sebagai alternatif, aturan css (di atas) harus dimasukkan dalam stylesheet eksternal aplikasi.

Saya tidak pernah beruntung menggunakan ngCloak. Saya masih berkedip meskipun semua yang disebutkan di atas. Satu-satunya cara jitu untuk menghindari menjentikkan adalah dengan meletakkan konten Anda di templat dan menyertakan templat. Di SPA, satu-satunya HTML yang akan dievaluasi sebelum dikompilasi oleh Angular adalah halaman index.html utama Anda.

Ambil semua yang ada di dalam tubuh dan tempelkan di file yang terpisah lalu:

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

Anda seharusnya tidak pernah berkedip seperti itu karena Angular akan mengkompilasi template sebelum menambahkannya ke DOM.

ngBind dan ngBindTemplate adalah alternatif yang tidak memerlukan 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>

Selain jawaban yang diterima jika Anda menggunakan metode alternatif untuk memicu ...

Anda mungkin juga ingin menambahkan beberapa spesifisitas tambahan ke CSS / KURANG Anda:

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

Saya memiliki masalah serupa dan menemukan bahwa jika Anda memiliki kelas yang berisi transisi, elemen tersebut akan berkedip. Saya mencoba menambahkan ng-jubah tanpa berhasil, tetapi dengan menghapus transisi tombol berhenti berkedip.

Saya menggunakan kerangka ionik dan garis tombol memiliki transisi ini

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

Cukup timpa kelas untuk menghapus transisi dan tombol akan berhenti berkedip.

Memperbarui

Sekali lagi pada ion ada flicker saat menggunakan ng-show / ng-hide. Menambahkan CSS berikut menyelesaikannya:

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

Sumber: http://forum.ionicframework.com/t/beta-14-ng-hide-show/14270/9

Saya punya masalah di mana a <div ng-show="expression">awalnya akan terlihat selama sepersekian detik, meskipun "ekspresi" awalnya salah, sebelum arahan ng-show mendapat kesempatan untuk berjalan.

Solusi yang saya gunakan adalah menambahkan kelas "ng-hide" secara manual, seperti pada <div ng-show="expression" ng-hide>, untuk memastikan awalnya dimulai tersembunyi. Arahan ng-show akan menambah / menghapus kelas ng-hide yang diperlukan setelah itu.

Cobalah untuk mematikan Firebug . Aku serius. Ini membantu dalam kasus saya.

Terapkan jawaban diterima dan kemudian memastikan bahwa Firebug di Firefox Anda diaktifkan off : tekan F12 kemudian mematikan Firebug untuk halaman ini - tombol kecil di sudut kanan atas.

Sebenarnya ada dua masalah terpisah yang dapat menyebabkan masalah flicker dan Anda mungkin menghadapi salah satu atau keduanya.

Masalah 1: ng-jubah diterapkan terlambat

Masalah ini diselesaikan karena dijelaskan dalam banyak jawaban di halaman ini untuk memastikan AngularJS dimuat di kepala. Lihat dokumen ngCloak :

Untuk hasil terbaik, skrip angular.js harus dimuat di bagian kepala file html; sebagai alternatif, aturan css (di atas) harus dimasukkan dalam stylesheet eksternal aplikasi.

Masalah 2: ng-jubah dihapus terlalu cepat

Masalah ini kemungkinan besar terjadi ketika Anda memiliki banyak CSS di halaman Anda dengan aturan yang saling mengalir satu sama lain dan lapisan CSS yang lebih dalam menyala sebelum lapisan atas diterapkan.

Solusi jQuery dalam jawaban yang melibatkan penambahan style="display:none"ke elemen Anda bisa menyelesaikan masalah ini selama gaya dihapus cukup terlambat (sebenarnya solusi ini menyelesaikan kedua masalah). Namun, jika Anda memilih untuk tidak menambahkan gaya langsung ke HTML Anda, Anda dapat mencapai hasil yang sama dengan menggunakan ng-show.

Dimulai dengan contoh dari pertanyaan:

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

Tambahkan aturan ng-show tambahan ke elemen Anda:

<ul ng-show="isPageFullyLoaded && (foo != null)" ng-cloak>..</ul>

(Anda harus tetap ng-cloakmenghindari masalah 1).

Kemudian di set app.run Anda isPageFullyLoaded:

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

Ketahuilah bahwa tergantung pada apa yang Anda lakukan, app.run mungkin atau mungkin bukan tempat terbaik untuk ditetapkan isPageFullyLoaded. Yang penting adalah memastikan bahwa isPageFullyLoadedmenjadi true setelah apa pun yang Anda tidak ingin berkedip siap untuk diungkapkan kepada pengguna.

Kedengarannya seperti Masalah 1 adalah masalah yang ditabrak OP, tetapi yang lain menemukan bahwa solusi tidak berfungsi atau hanya berfungsi sebagian karena mereka malah memukul Masalah 2 atau juga.

Catatan Penting: Pastikan untuk menerapkan solusi untuk kedua ng-jubah yang diterapkan terlambat DAN dihapus untuk segera. Memecahkan hanya satu dari masalah ini mungkin tidak menghilangkan gejala.

Kami mengalami masalah ini di perusahaan kami dan menyelesaikannya dengan menambahkan "display: none" ke styling CSS untuk elemen-elemen yang berkedip-kedip. Kami tidak harus menggunakan ng-jubah sama sekali. Tidak seperti orang lain di utas ini, kami mengalami masalah ini di Safari tetapi tidak pada Firefox atau Chrome - mungkin karena bug repic malas Safari di iOS7 .

Untuk apa nilainya, saya punya masalah serupa ng-jubah tidak berfungsi. Mungkin perlu memeriksa aplikasi / situs Anda dengan cache diaktifkan untuk menggunakan kembali file sumber untuk melihat apakah itu membantu.

Dengan run-in saya dengan flickering, saya menguji dengan DevTools terbuka dan cache dimatikan. Membiarkan panel tertutup dengan caching diaktifkan memperbaiki masalah saya.

Menjaga pernyataan di bawah ini di kepala tag memperbaiki masalah ini

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

dokumentasi resmi

Saya tidak bisa mendapatkan salah satu dari metode ini untuk bekerja, jadi saya akhirnya melakukan yang berikut. Untuk elemen yang ingin Anda sembunyikan pada awalnya:

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

Kemudian di controller Anda, tambahkan ini di atau dekat bagian atas:

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

Dengan cara ini, elemen tersebut awalnya disembunyikan, dan hanya ditampilkan ketika kode pengontrol benar-benar dijalankan.

Anda dapat menyesuaikan penempatan dengan kebutuhan Anda, mungkin menambahkan beberapa logika. Dalam kasus saya, saya beralih ke jalur masuk jika saat ini tidak masuk, dan tidak ingin antarmuka saya berkedip sebelumnya, jadi saya mengatur $scope.stylesetelah cek masuk.

Lebih baik digunakan ng-ifdaripada ng-show. ng-if sepenuhnya menghapus dan membuat ulang elemen di DOM dan membantu untuk menghindari ng-show berkedip.

Saya menggunakan kerangka ionik, menambahkan gaya css mungkin tidak berfungsi untuk keadaan tertentu, Anda dapat mencoba menggunakan ng-jika alih-alih ng-show / ng-hide

ref: https://books.google.com.my/books?id=-_5_CwAAQBAJ&pg=PA138&lpg=PA138&dq=ng-show+hide+flickering+in+ios&source=bl&ots=m2Turk8DFh&sig=8hz&hl=id&hl=id&hl=id&hl=id&hl=id = onepage & q = ng-tampilkan% 20 sembunyikan% 20 berkedip% 20 di% 20ios & f = false

Anda sebaiknya referensi dokumen sudut, karena versi [1.4.9] memiliki pembaruan di bawah ini yang membuatnya dapat mendukung arahan data-ng-jubah.

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

Saya mencoba solusi ng-cloak di atas tetapi masih memiliki masalah intermiten dengan Firefox. Satu-satunya solusi yang berfungsi untuk saya adalah menunda pemuatan formulir hingga Angular dimuat penuh.

Saya cukup menambahkan ng-init di aplikasi dan menggunakan ng-if di sisi formulir untuk memeriksa apakah variabel yang saya set sudah dimuat.

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

Selain jawaban lain, jika Anda menemukan flash kode templat masih terjadi, kemungkinan Anda memiliki skrip Anda di bagian bawah halaman dan itu berarti bahwa arahan ng-jubah langsung ke atas tidak akan berfungsi. Anda dapat memindahkan skrip ke kepala atau membuat aturan CSS.

Dokumen mengatakan "Untuk hasil terbaik, skrip angular.js harus dimuat di bagian kepala dokumen html; atau, aturan css di atas harus dimasukkan dalam stylesheet eksternal aplikasi."

Sekarang, itu tidak harus menjadi stylesheet eksternal tetapi hanya dalam elemen di kepala.

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

sumber: https://docs.angularjs.org/api/ng/directive/ngCloak

Saya mencoba setiap solusi yang diposting di sini dan masih berkedip di Firefox.

Jika itu membantu siapa pun, saya menyelesaikannya dengan menambahkan style="display: none;"ke div konten utama, kemudian menggunakan jQuery (saya sudah menggunakannya pada halaman) $('#main-div-id').show();setelah semuanya dimuat setelah mendapatkan data dari server;

Saya benar-benar menemukan saran dari Web Log Rick Strahl memperbaiki masalah saya dengan sempurna (karena saya masih memiliki masalah aneh dengan ng-cloak yang berkedip-kedip mentah {{code}} kadang-kadang, terutama saat menjalankan Firebug):

Opsi nuklir: Menyembunyikan Konten secara manual

Menggunakan CSS eksplisit adalah pilihan terbaik, jadi berikut ini seharusnya tidak perlu. Tapi saya akan menyebutkannya di sini karena memberikan beberapa wawasan bagaimana Anda dapat menyembunyikan / menampilkan konten secara manual saat dimuat untuk kerangka kerja lain atau dalam templat berbasis markup Anda sendiri.

Sebelum saya tahu bahwa saya bisa secara eksplisit menanamkan gaya CSS ke halaman, saya telah mencoba mencari tahu mengapa ng-jubah tidak melakukan tugasnya. Setelah menghabiskan satu jam untuk mencapai tujuan saya akhirnya memutuskan untuk hanya menyembunyikan dan menunjukkan wadah secara manual. Idenya sederhana - awalnya menyembunyikan wadah, lalu tunjukkan begitu Angular telah melakukan pemrosesan awal dan penghapusan markup template dari halaman.

Anda dapat menyembunyikan konten secara manual dan membuatnya terlihat setelah Angular mendapatkan kontrol. Untuk melakukan ini saya menggunakan:

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

Perhatikan tampilan: tidak ada gaya yang secara eksplisit menyembunyikan elemen pada awalnya di halaman.

Kemudian setelah Angular menjalankan inisialisasi dan secara efektif memproses markup template pada halaman Anda dapat menampilkan konten. Untuk Angular acara 'siap' ini adalah fungsi app.run ():

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

Ini secara efektif menghilangkan tampilan: tidak ada gaya dan konten yang ditampilkan. Pada saat app.run () diaktifkan, DOM siap ditampilkan dengan data yang diisi atau setidaknya data kosong - Angular telah mendapatkan kendali.

Saya mencoba semua jawaban di atas dan tidak ada yang berhasil. Menggunakan ion untuk mengembangkan aplikasi hibrida dan berusaha membuat pesan kesalahan tidak berkedip. Saya akhirnya memecahkan masalah saya dengan menambahkan kelas ng-hide ke elemen saya. Div saya sudah ng-show untuk menunjukkan elemen ketika ada kesalahan. Menambahkan ng-hide atur div agar tidak ditampilkan sebelum angular dimuat. Tidak perlu ng-jubah atau menambahkan sudut ke kepala.

SEBAGAI dari diskusi di atas

[ng-cloak] {
                display: none;
            }

adalah cara sempurna untuk menyelesaikan Masalah.

Saya menggunakan ng-show dalam arahan untuk menampilkan dan menyembunyikan popup.

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

Tidak satu pun di atas yang berfungsi untuk saya, dan menggunakan ng-jika alih-alih ng-show akan menjadi berlebihan. Itu akan berarti menghapus dan menambahkan seluruh konten sembulan ke dalam DOM di setiap klik. Sebagai gantinya saya menambahkan ng-jika ke dalam elemen yang sama untuk memastikan itu tidak muncul pada saat memuat dokumen:

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

Setelah itu saya menambahkan inisialisasi ke controller yang bertanggung jawab atas arahan ini dengan batas waktu:

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

Dengan cara ini saya menghilangkan masalah berkedip-kedip dan menghindari operasi mahal dari penyisipan DOM di setiap klik. Ini datang dengan mengorbankan menggunakan dua variabel lingkup untuk tujuan yang sama, bukan satu, tetapi sejauh ini jelas merupakan pilihan terbaik.

Sudah mencoba ng-cloaktapi masih berkedip sebentar. Kode di bawah ini menyingkirkan mereka sepenuhnya.

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

Tidak ada solusi yang tercantum di atas yang berfungsi untuk saya. Saya kemudian memutuskan untuk melihat fungsi yang sebenarnya dan menyadari bahwa ketika "$ scope.watch" dipecat, itu memberi nilai pada bidang nama yang tidak dimaksudkan sebagai kasus. Jadi dalam kode saya atur dan oldValue dan newValue

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

Pada dasarnya ketika scope.watch dipecat dalam kasus ini, AngularJS memonitor perubahan pada variabel nama (model.value)

Saya akan membungkus <ul>dengan<div ng-cloak>

Saya pribadi memutuskan untuk menggunakan ng-classatribut daripadang-show . Saya lebih sukses melewati rute ini terutama untuk jendela sembul yang selalu tidak ditampilkan secara default.

Apa yang dulu <div class="options-modal" ng-show="showOptions"></div>

sekarang: <div class="options-modal" ng-class="{'show': isPrintModalShown}">

dengan CSS untuk kelas opsi-modal secara display: nonedefault. Kelas pertunjukan berisi display:blockCSS.

Hindari jeda baris

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

Bekerja dengan Firefox 45.0.1

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