Angularjs - ng-cloak / ng-show elemanları yanıp sönüyor

Angular.js'de yönerge / class ng-cloakveya ile ilgili bir sorunum var ng-show.

Chrome iyi çalışıyor, ancak Firefox ng-cloakveya öğelerinin yanıp sönmesine neden oluyor ng-show. IMHO neden oluyor dönüştürme ng-cloak/ ng-showetmek style="display: none;", muhtemelen Firefox JavaScript derleyicisi biraz daha yavaş bir süre elemanları göründüğünü böylece daha sonra gizlemek nedir?

Misal:

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

Belgeler bundan bahsetmese de, display: none;kuralı CSS'nize eklemek yeterli olmayabilir . Eğer vücutta yükleme angularjs veya şablonlar kullanmak, yakında derlenmiş değildir durumlarda ng-cloakyönergesi ve CSS'nizde aşağıdakileri içerir:

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

Yorumda belirtildiği gibi !important, önemlidir. Örneğin, aşağıdaki işaretlemeniz varsa

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

ve kullandığınızda bootstrap.css, aşağıdaki seçici ng-cloak'ed öğeniz için daha spesifiktir

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

Dolayısıyla, basitçe bir kural eklerseniz display: none;, Bootstrap'in kuralı öncelik kazanır ve kural displayolarak ayarlanır block, böylece şablon derlenmeden önceki titremeyi görürsünüz.

Gibi belgelerinde belirtildiği , bunu dayalı postu için CSS için bir kural eklemek gerekir ng-cloaközniteliği:

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

Github'da kaynağını görüntüleyebileceğiniz "Açısal ile Oluşturuldu" sitesinde benzer numaralar kullanıyoruz: https://github.com/angular/builtwith.angularjs.org

Umarım yardımcı olur!

headHTML'nin AngularJS öğesinin bulunduğundan emin olun . Göz doktoruna bakın :

En iyi sonuç için, angular.js komut dosyasının html dosyasının baş bölümüne yüklenmesi gerekir; alternatif olarak, css kuralı (yukarıda) uygulamanın dış stil sayfasına dahil edilmelidir.

NgCloak kullanarak hiç şansım olmadı. Yukarıda belirtilen her şeye rağmen hala titriyorum. Vuruştan kaçınmanın tek kesin yolu, içeriğinizi bir şablona koymak ve şablonu dahil etmektir. Bir SPA'da, Angular tarafından derlenmeden önce değerlendirilecek tek HTML, ana index.html sayfanızdır.

Sadece vücudun içindeki her şeyi alın ve ayrı bir dosyaya yapıştırın ve sonra:

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

Açısal şablonu DOM'a eklemeden önce derleyeceği için hiçbir zaman bu şekilde titrememelisiniz.

ngBind ve ngBindTemplate , CSS gerektirmeyen alternatiflerdir:

<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'ı tetiklemek için alternatif bir yöntem kullanıyorsanız, kabul edilen cevaba ek olarak ...

Ayrıca CSS / LESS'inize bazı ek özellikler eklemek de isteyebilirsiniz:

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

Benzer bir sorunum vardı ve geçişler içeren bir sınıfınız varsa, öğenin yanıp söneceğini öğrendim. Başarılı olmadan ng-cloak eklemeye çalıştım, ancak geçişi kaldırarak düğmenin yanıp sönmesi durdu.

İyonik çerçeve kullanıyorum ve düğme-anahatta bu geçiş var

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

Geçişi kaldırmak için sınıfın üzerine yazmanız yeterlidir; düğmenin yanıp sönmesi durur.

Güncelleme

Yine iyonik olduğunda ng-show / ng-hide kullanılırken bir titreşim olur. Aşağıdaki CSS eklemek sorunu çözer:

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

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

Bir sorun yaşadım. <div ng-show="expression">Ng-show yönergesi çalışma şansı elde etmeden önce "ifade" başlangıçta yanlış olsa bile, başlangıçta bir saniye için görünür olacak .

Kullandığım çözüm <div ng-show="expression" ng-hide>, başlangıçta gizlendiğinden emin olmak için "ng-hide" sınıfını olduğu gibi manuel olarak eklemekti . Ng-show yönergesi bundan sonra gerekli olduğunda ng-hide sınıfını ekler / kaldırır.

Firebug'i kapatmayı deneyin . Ciddiyim. Benim durumumda bu yardımcı olur.

Kabul edilen yanıtı uygulayın ve ardından Firefox'unuzdaki Firebug'un kapalı olduğundan emin olun : F12 tuşuna basın, ardından bu sayfa için Firebug'u kapatın - sağ üst köşedeki küçük düğme.

Titreşim sorununa neden olabilecek iki ayrı sorun var ve bunlardan biri veya her ikisi ile karşı karşıya kalabilirsiniz.

Problem 1: ng-cloak çok geç uygulanıyor

Bu sorun, AngularJS'nin kafaya yüklendiğinden emin olmak için bu sayfadaki cevapların çoğunda açıklandığı gibi çözülmüştür. Göz doktoruna bakın :

En iyi sonuç için, angular.js komut dosyasının html dosyasının baş bölümüne yüklenmesi gerekir; alternatif olarak, css kuralı (yukarıda) uygulamanın dış stil sayfasına dahil edilmelidir.

Sorun 2: ng-pelerin çok erken kaldırıldı

Sayfanızda, birbiri üzerine basamaklı kurallar içeren çok sayıda CSS varsa ve üst katman uygulanmadan önce CSS'in daha derin katmanları yanıp sönüyorsa, bu sorun büyük olasılıkla ortaya çıkar.

Öğenize eklemeyi içeren yanıtlardaki jQuery çözümleri style="display:none", stil yeterince geç kaldırıldığı sürece bu sorunu çözer (aslında bu çözümler her iki sorunu da çözer). Ancak, doğrudan HTML'nize stil eklememeyi tercih ederseniz, aynı sonuçları kullanarak elde edebilirsiniz ng-show.

Sorudaki örnekle başlayarak:

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

Öğenize ek bir ng-show kuralı ekleyin:

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

( ng-cloakSorun 1'den kaçınmanız gerekir ).

Sonra app.run setinizde isPageFullyLoaded:

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

Tam olarak ne yaptığınıza bağlı olarak, app.run'un ayarlanacak en iyi yer olabileceğini veya olmayabileceğini unutmayın isPageFullyLoaded. Önemli isPageFullyLoadedolan, titreşmek istemediğiniz her şeyden sonra kullanıcıya açıklanmaya hazır olduktan sonra doğru ayarlanmasını sağlamaktır.

Gibi geliyor Sorun 1 OP vuruyor sorundur, ama diğerleri çözüm çalışması değil veya yalnızca kısmen onlar isabet çünkü çalıştığını buluyorlar Sorunu 2 yerine veya yanı.

Önemli Not: Her iki ng-cloak'a çok geç uygulanmış ve yakında çıkarılan solüsyonlara uyguladığınızdan emin olun. Bu sorunlardan sadece birini çözmek semptomları hafifletmeyebilir.

Şirketimizde bu problemle karşılaştık ve titreyen ng-show elemanları için CSS stiline "display: none" ekleyerek çözdük. Hiç ng-cloak kullanmak zorunda değildik. Bu konudaki diğerlerinden farklı olarak, muhtemelen Safari'nin iOS7'deki tembel boya hatası nedeniyle Firefox veya Chrome'da değil, bu sorunu yaşadık .

Değeri için ng-cloak çalışmıyor benzer bir sorun vardı. Kaynak dosyaların yeniden kullanılıp kullanılmadığını görmek için önbelleği etkin olarak uygulamanızı / sitenizi kontrol etmeye değer olabilir.

Titreyen alıştırma ile DevTools açık ve önbellek devre dışı bırakılmışken test yapıyordum. Paneli önbellekleme etkinken kapalı bırakmak sorunumu çözdü.

Aşağıdaki ifadelerin başlık etiketinde tutulması bu sorunu çözdü

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

resmi dokümantasyon

Bu yöntemlerden herhangi birini çalıştıramadım, bu yüzden sonunda aşağıdakileri yaptım. Başlangıçta gizlemek istediğiniz öğe için:

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

Ardından kumandanıza, bunu en üste veya yakınına ekleyin:

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

Bu şekilde, öğe başlangıçta gizlenir ve yalnızca denetleyici kodu gerçekten çalıştığında gösterilir.

Yerleşimi ihtiyaçlarınıza göre ayarlayabilir, belki biraz mantık ekleyebilirsiniz. Benim durumumda, şu anda oturum açmadıysanız bir giriş yoluna geçiyorum ve arayüzümün önceden titremesini istemiyordum, bu yüzden $scope.stylegiriş kontrolünden sonra ayarladım .

Bunun ng-ifyerine kullanmak daha iyidir ng-show. ng-if DOM'daki öğeyi tamamen kaldırır ve yeniden oluşturur ve gösterilerin yanıp sönmesini önlemeye yardımcı olur.

İyonik çerçeve kullanıyorum, css stili eklemek belirli durumlar için çalışmayabilir, ng-show / ng-hide yerine ng-if kullanmayı deneyebilirsiniz

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=8hNiWxk_wjzg_d_w_g = onepage ve q = ng göstermek% 20hide% 20flickering% 20in% 20ios & f = yanlış

açısal belgeye daha iyi başvurursanız, [1.4.9] sürümü veri-ng-cloak yönergesini destekleyebilecek şekilde aşağıya güncellediğinden.

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

Yukarıdaki ng-cloak çözümünü denedim, ancak Firefox ile hala aralıklı sorunlar var. Benim için çalışan tek çözüm, Angular tamamen yüklenene kadar formun yüklenmesini geciktirmektir.

Ben sadece app ng-init ekledim ve ben set değişkenin zaten yüklü olup olmadığını kontrol etmek için form tarafında ng-if kullanın.

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

Diğer yanıtlara ek olarak, şablon kodunun flaşının hala ortaya çıktığını görürseniz, komut dosyalarınızın sayfanın alt kısmında olması muhtemeldir ve bu da ng-cloak yönergesinin düz olarak çalışmayacağı anlamına gelir. Komut dosyalarınızı başa taşıyabilir veya bir CSS kuralı oluşturabilirsiniz.

Dokümanlar "En iyi sonuç için, angular.js komut dosyasının html belgesinin baş bölümüne yüklenmesi gerekir; alternatif olarak, yukarıdaki css kuralı uygulamanın dış stil sayfasına dahil edilmelidir."

Şimdi, harici bir stil sayfası olmak zorunda değil, sadece kafadaki bir elemanda.

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

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

Burada yayınlanan her çözümü denedim ve hala Firefox'ta titriyor.

Herkes yardımcı olur, ben style="display: none;"ana içerik div ekleyerek , sonra $('#main-div-id').show();her şeyi sunucudan veri aldıktan sonra yüklendikten sonra jQuery (zaten zaten kullanıyordum) kullanarak çözdüm ;

Aslında Rick Strahl'ın Web Günlüğü'ndeki öneri sorunumu mükemmel bir şekilde çözdüm (özellikle Firebug çalıştırırken ng {cloak yanıp sönen ham {{code}} ile ilgili garip bir sorun yaşadığım için):

Nükleer seçenek: İçeriği manuel olarak gizleme

Açık CSS kullanmak en iyi seçimdir, bu nedenle aşağıdakiler asla gerekli olmamalıdır. Ancak burada bahsedeceğim, çünkü diğer çerçeveler için yükte veya kendi işaretleme şablonlarınızda içeriği manuel olarak nasıl gizleyebileceğiniz / gösterebileceğiniz hakkında bazı bilgiler veriyor.

CSS stilini açık bir şekilde sayfaya gömebileceğimi fark etmeden önce, ng-cloak'ın neden işini yapmadığını anlamaya çalışmıştım. Hiçbir yere gitmeden bir saat harcadıktan sonra sonunda sadece kabı manuel olarak gizlemeye ve göstermeye karar verdim. Fikir basittir - önce kapsayıcıyı gizleyin, ardından Angular ilk işlemeyi ve şablon işaretlemesini sayfadan kaldırdıktan sonra gösterin.

Angular kontrolü aldıktan sonra içeriği manuel olarak gizleyebilir ve görünür hale getirebilirsiniz. Bunu yapmak için kullandım:

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

Display: none ifadesini başlangıçta sayfada başlangıçta gizleyen bir stil yok.

Sonra Açısal başlatmayı çalıştırdıktan ve sayfadaki şablon işaretlemesini etkili bir şekilde işledikten sonra içeriği gösterebilirsiniz. Açısal için bu 'hazır' olay app.run () işlevidir:

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

Bu, ekranı etkili bir şekilde kaldırır: hiçbir stil ve içerik görüntülenmez. App.run () tetiklendiğinde, DOM dolu verilerle veya en azından boş verilerle görüntülenmeye hazırdır - Açısal kontrol altına alınmıştır.

Yukarıdaki tüm cevapları denedim ve hiçbir şey işe yaramadı. Hibrit bir uygulama geliştirmek için iyonik kullanmak ve titremeyen bir hata mesajı yapmaya çalışıyordu. Öğemi bir ng-hide sınıfı ekleyerek sorunumu çözdüm. Div'imde, bir hata olduğunda öğeyi göstermek için ng-show zaten var. Ng-hide eklenmesi, div açısal yüklenmeden önce görüntülenmeyecek şekilde ayarlanır. Ng-pelerin veya kafaya açısal eklemeye gerek yoktur.

Yukarıdaki tartışma AS

[ng-cloak] {
                display: none;
            }

Sorunu çözmek için mükemmel bir yoldur.

Pop-show'ları göstermek ve gizlemek için bir yönergede ng-show kullanıyorum.

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

Yukarıdakilerin hiçbiri benim için işe yaramadı ve ng-show yerine ng-if kullanmak aşırıya kaçacaktı. Bu, her bir tıklamayla tüm pop-up içeriğinin DOM'ya kaldırılması ve DOM'a eklenmesi anlamına gelir. Bunun yerine, belge yükünde görünmediğinden emin olmak için aynı öğeye bir ng-if ekledim:

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

Daha sonra başlatma işlemini bu direktiften sorumlu olan kontrolöre bir zaman aşımı ile ekledim:

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

Bu şekilde titreyen sorunu ortadan kaldırdım ve her bir tıklamayla DOM eklemenin maliyetli çalışmasını engelledim. Bu, iki kapsam değişkenini bir amaç yerine aynı amaç için kullanma pahasına geldi, ancak şimdiye kadar bu kesinlikle en iyi seçenektir.

Denenmiş ng-cloakama yine de kısa yanıp sönüyor. Kodun altında tamamen kurtulun.

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

Yukarıda listelenen çözümlerin hiçbiri benim için işe yaramadı. Daha sonra asıl işleve bakmaya karar verdim ve “$ scope.watch” tetiklendiğinde, isim alanına durumun böyle olması gereken bir değer koyduğunu fark ettim. Kodda ayarladım ve oldValue ve newValue sonra

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

Esasen bu durumda scope.watch tetiklendiğinde, AngularJS ad değişkenindeki değişiklikleri (model.value) izler

Ben <ul>bir ile sarmak istiyorum<div ng-cloak>

Şahsen bu ng-classözelliği kullanmaya karar verdim ng-show. Özellikle her zaman varsayılan olarak gösterilmeyen pop-up pencereler için bu rotada çok daha başarılı oldum.

Eskiden ne <div class="options-modal" ng-show="showOptions"></div>

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

options-modal sınıfı için CSS display: nonevarsayılan olarak kullanılır. Show sınıfı display:blockCSS'yi içerir .

Satır kesmesinden kaçının

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

Firefox 45.0.1 ile çalışır

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