Angularjs - elementy ng-cloak / ng-show migają

Mam problem w angular.js z dyrektywą / klasą ng-cloaklub ng-show.

Chrome działa dobrze, ale Firefox powoduje miganie elementów za pomocą ng-cloaklub ng-show. IMHO jest spowodowany przez konwersję ng-cloak/ ng-showdo style="display: none;", prawdopodobnie kompilator javascript w Firefoksie jest nieco wolniejszy, więc elementy pojawiają się przez chwilę, a następnie się chowają?

Przykład:

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

Chociaż dokumentacja nie wspomina o tym, dodanie display: none;reguły do ​​CSS może być niewystarczające . W przypadku, gdy ładujesz plik angular.js w treści lub szablony nie są wystarczająco szybko skompilowane, skorzystaj z ng-cloakdyrektywy i dołącz do 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;
}

Jak wspomniano w komentarzu, !importantjest to ważne. Na przykład, jeśli masz następujące znaczniki

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

i akurat używasz bootstrap.css, poniższy selektor jest bardziej szczegółowy dla twojego ng-cloakelementu ed

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

Jeśli więc włączysz regułę po prostu display: none;, reguła Bootstrap będzie miała pierwszeństwo i displayzostanie ustawiona na block, więc zobaczysz migotanie przed kompilacją szablonu.

Jak wspomniano w dokumentacji , należy dodać regułę do CSS, aby ukryć ją na podstawie ng-cloakatrybutu:

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

Podobne sztuczki wykorzystujemy na stronie „Built with Angular”, której źródło możesz obejrzeć na Github: https://github.com/angular/builtwith.angularjs.org

Mam nadzieję, że to pomaga!

Upewnij się, że AngularJS znajduje się w kodzie headHTML. Zobacz dokument ngCloak :

Aby uzyskać najlepszy wynik, skrypt angular.js musi zostać załadowany w sekcji head pliku HTML; alternatywnie reguła css (powyżej) musi być zawarta w zewnętrznym arkuszu stylów aplikacji.

Nigdy nie miałem dużo szczęścia, używając ngCloak. Nadal migoczę pomimo wszystkiego, co wspomniano powyżej. Jedynym pewnym sposobem na uniknięcie przesuwania jest umieszczenie treści w szablonie i dołączenie szablonu. W SPA jedynym HTMLem, który zostanie oceniony przed kompilacją przez Angular, jest twoja główna strona index.html.

Po prostu weź wszystko do ciała i umieść w osobnym pliku, a następnie:

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

Nigdy nie powinieneś migotać w ten sposób, ponieważ Angular skompiluje szablon przed dodaniem go do DOM.

ngBind i ngBindTemplate to alternatywy, które nie wymagają 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>

Oprócz zaakceptowanej odpowiedzi, jeśli używasz alternatywnej metody wyzwalania ng-cloak ...

Możesz również dodać kilka dodatkowych szczegółów do swojego CSS / MNIEJ:

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

Miałem podobny problem i odkryłem, że jeśli masz klasę zawierającą przejścia, element będzie migał. Próbowałem dodać ng-cloak bez powodzenia, ale po usunięciu przejścia przycisk przestał migać.

Używam szkieletu jonowego, a kontur przycisku ma to przejście

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

Wystarczy zastąpić klasę, aby usunąć przejście, a przycisk przestanie migać.

Aktualizacja

Ponownie na jonach pojawia się migotanie podczas używania ng-show / ng-hide. Dodanie następującego CSS rozwiązuje to:

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

Źródło: http://forum.ionicframework.com/t/beta-14-ng-hide-show/14270/9

Miałem problem polegający na tym, <div ng-show="expression">że na początku ułamek sekundy byłby widoczny, chociaż „wyrażenie” było początkowo fałszywe, zanim dyrektywa ng-show miała szansę uruchomić.

Rozwiązaniem, którego użyłem było ręczne dodanie klasy „ng-hide”, tak jak w <div ng-show="expression" ng-hide>, aby upewnić się, że początkowo była ukryta. Dyrektywa ng-show w razie potrzeby doda / usunie klasę ng-hide.

Spróbuj wyłączyć Firebug . Jestem poważny. To pomaga w moim przypadku.

Zastosuj zaakceptowaną odpowiedź, a następnie upewnij się, że Firebug w przeglądarce Firefox jest wyłączony : naciśnij F12, a następnie wyłącz Firebug dla tej strony - mały przycisk w prawym górnym rogu.

W rzeczywistości istnieją dwa oddzielne problemy, które mogą powodować problem z migotaniem i możesz napotkać jeden lub oba z nich.

Problem 1: Płaszcz ng nakłada się zbyt późno

Ten problem został rozwiązany, jak opisano w wielu odpowiedziach na tej stronie, aby upewnić się, że AngularJS jest załadowany do głowy. Zobacz dokument ngCloak :

Aby uzyskać najlepszy wynik, skrypt angular.js musi zostać załadowany w sekcji head pliku HTML; alternatywnie reguła css (powyżej) musi być zawarta w zewnętrznym arkuszu stylów aplikacji.

Problem 2: Płaszcz ng jest usuwany zbyt wcześnie

Ten problem występuje najprawdopodobniej, gdy na stronie jest dużo CSS z regułami kaskadowymi względem siebie, a głębsze warstwy CSS migają przed nałożeniem górnej warstwy.

Rozwiązania jQuery w odpowiedziach dotyczących dodawania style="display:none"do elementu rozwiązują ten problem, o ile styl jest usuwany wystarczająco późno (w rzeczywistości rozwiązania te rozwiązują oba problemy). Jeśli jednak wolisz nie dodawać stylów bezpośrednio do kodu HTML, możesz osiągnąć te same wyniki za pomocą ng-show.

Począwszy od przykładu z pytania:

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

Dodaj dodatkową regułę ng-show do swojego elementu:

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

(Musisz zachować, ng-cloakaby uniknąć problemu 1).

Następnie w zestawie aplikacji. Uruchom isPageFullyLoaded:

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

Pamiętaj, że w zależności od tego, co robisz, app.run może być najlepszym miejscem do ustawienia isPageFullyLoaded. Ważne jest, aby upewnić się, że isPageFullyLoadedzostanie ustawiona wartość true, gdy wszystko, czego nie chcesz migotać, jest gotowe do ujawnienia użytkownikowi.

Wygląda na to, że Problem 1 jest problemem, na który uderza OP, ale inni stwierdzają, że rozwiązanie nie działa lub tylko częściowo działa, ponieważ zamiast tego trafia na Problem 2 lub też.

Ważna uwaga: pamiętaj, aby zastosować rozwiązania na obu płaszczach ng nakładanych zbyt późno ORAZ usunąć je wkrótce. Rozwiązanie tylko jednego z tych problemów może nie złagodzić objawów.

W naszej firmie napotkaliśmy ten problem i rozwiązaliśmy go, dodając „display: none” do stylizacji CSS dla tych migających elementów ng-show. W ogóle nie musieliśmy używać peleryny. W przeciwieństwie do innych w tym wątku ten problem występował w przeglądarce Safari, ale nie w przeglądarce Firefox ani Chrome - prawdopodobnie z powodu leniwego błędu odświeżania przeglądarki Safari w systemie iOS7 .

Za to, co jest warte, miałem podobny problem z niedziałającym płaszczem ng. Warto sprawdzić swoją aplikację / witrynę z włączoną pamięcią podręczną, aby ponownie wykorzystać pliki źródłowe, aby sprawdzić, czy to pomoże.

Z moim docierania z migotaniem testowałem przy otwartym DevTools i wyłączonej pamięci podręcznej. Pozostawienie panelu zamkniętego z włączonym buforowaniem naprawiło mój problem.

Utrzymanie poniższych instrukcji w tagu head rozwiązało ten problem

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

oficjalna dokumentacja

Nie mogłem zmusić żadnej z tych metod do działania, więc w końcu zrobiłem następujące. W przypadku elementu, który chcesz początkowo ukryć:

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

Następnie w kontrolerze dodaj to na górze lub w pobliżu:

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

W ten sposób element jest początkowo ukryty i wyświetla się tylko wtedy, gdy kod kontrolera rzeczywiście się uruchomił.

Możesz dostosować miejsce docelowe do swoich potrzeb, być może dodając trochę logiki. W moim przypadku przełączam się na ścieżkę logowania, jeśli nie jestem zalogowany, i nie chciałem wcześniej migotać interfejsu, więc ustawiłem $scope.stylepo sprawdzeniu zalogowanego.

Lepiej używać ng-ifzamiast ng-show. ng-if całkowicie usuwa i odtwarza element w DOM i pomaga uniknąć mrugania na ng-show.

Używam platformy jonowej, dodanie stylu css może nie działać w pewnych okolicznościach, możesz spróbować użyć ng-if zamiast ng-show / ng-hide

ref: https://books.google.com.my/books?id=-_5_CwAAQBAJ&pg=PA138&lpg=PA138&dq=ng-show+hide+hick+flickering+in+ios&source=bl&ots=m2Turk8DFh&sig=8hNiWx26euGRV&&_=&GRK&K = na stronie i q = ng-show% 20hide% 20 migotanie% 20in% 20ios & f = false

Lepiej odwołaj się do dokumentu kątowego, ponieważ wersja [1.4.9] ma aktualizację poniżej, dzięki czemu może obsługiwać dyrektywę maskowania danych.

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

Wypróbowałem powyższe rozwiązanie ng-cloak, ale nadal występują sporadyczne problemy z Firefoksem. Jedynym obejściem, które działało dla mnie, było opóźnienie ładowania formularza do momentu pełnego załadowania Angulara.

Po prostu dodałem ng-init w aplikacji i używam ng-if po stronie formularza, aby sprawdzić, czy ustawiona zmienna jest już załadowana.

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

Oprócz innych odpowiedzi, jeśli nadal pojawia się flash kodu szablonu, prawdopodobnie masz skrypty na dole strony, co oznacza, że ​​dyrektywa ng-cloak nie będzie działać. Możesz przenieść skrypty do głowy lub utworzyć regułę CSS.

Dokumenty mówią „Aby uzyskać najlepszy wynik, skrypt angular.js musi zostać załadowany w sekcji head dokumentu HTML; alternatywnie powyższa reguła css musi zostać zawarta w zewnętrznym arkuszu stylów aplikacji”.

Teraz nie musi to być zewnętrzny arkusz stylów, ale tylko element w głowie.

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

źródło: https://docs.angularjs.org/api/ng/directive/ngCloak

Wypróbowałem wszystkie zamieszczone tutaj rozwiązania i nadal migotałem w przeglądarce Firefox.

Jeśli komukolwiek to pomaga, rozwiązałem go, dodając style="display: none;"do głównego div div treści, a następnie używając jQuery (użyłem go już na stronie), $('#main-div-id').show();gdy wszystko zostało załadowane po pobraniu danych z serwera;

Właściwie znalazłem sugestię z dziennika sieci Ricka Strahla doskonale rozwiązała mój problem (ponieważ wciąż miałem dziwny problem z czasami mruganiem surowego {{code}} ng-cloak, szczególnie podczas uruchamiania Firebug):

Opcja nuklearna: ręczne ukrywanie treści

Korzystanie z jawnego CSS jest najlepszym wyborem, więc poniższe nie powinny być nigdy konieczne. Ale wspomnę o tym tutaj, ponieważ daje pewien wgląd w to, jak ręcznie ukrywać / wyświetlać zawartość przy ładowaniu dla innych frameworków lub we własnych szablonach opartych na znacznikach.

Zanim zorientowałem się, że mogę wyraźnie osadzić styl CSS na stronie, próbowałem dowiedzieć się, dlaczego ng-cloak nie spełnia swojej roli. Po marnowaniu godziny na nic nie zdecydowałem w końcu po prostu ręcznie ukryć i pokazać pojemnik. Pomysł jest prosty - początkowo ukryj pojemnik, a następnie pokaż go, gdy Angular dokończy przetwarzania i usunie znaczniki szablonu ze strony.

Możesz ręcznie ukryć zawartość i sprawić, aby była widoczna po przejęciu kontroli przez Angular. Aby to zrobić, użyłem:

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

Zwróć uwagę na sposób wyświetlania: żaden styl, który początkowo wyraźnie ukrywa element na stronie.

Następnie, gdy Angular uruchomi swoją inicjalizację i efektywnie przetworzy znaczniki szablonów na stronie, możesz wyświetlić zawartość. W przypadku Angular tym „gotowym” zdarzeniem jest funkcja app.run ():

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

To skutecznie usuwa wyświetlanie: brak stylu i wyświetlanie zawartości. Do czasu uruchomienia app.run () DOM jest gotowy do wyświetlenia z wypełnionymi danymi lub przynajmniej pustymi danymi - Angular przejął kontrolę.

Próbowałem wszystkich powyższych odpowiedzi i nic nie działało. Używałem jonu do opracowania aplikacji hybrydowej i starałem się, aby komunikat o błędzie nie migał. Rozwiązałem problem, dodając klasę ng-hide do mojego elementu. Mój div ma już ng-show, aby pokazać element, gdy wystąpi błąd. Dodanie ng-hide powoduje, że div nie będzie wyświetlany przed załadowaniem kąta. Nie jest konieczne maskowanie ani powiększanie głowy pod kątem.

AS z powyższej dyskusji

[ng-cloak] {
                display: none;
            }

to idealny sposób na rozwiązanie problemu.

Używam ng-show w dyrektywie, aby wyświetlać i ukrywać wyskakujące okienka.

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

Żadne z powyższych nie działało dla mnie, a użycie ng-if zamiast ng-show byłoby przesadą. Oznaczałoby to usunięcie i dodanie całej zawartości wyskakującego okienka do DOM za każdym kliknięciem. Zamiast tego dodałem ng-if do tego samego elementu, aby upewnić się, że nie wyświetla się przy ładowaniu dokumentu:

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

Następnie dodałem inicjalizację do kontrolera odpowiedzialnego za tę dyrektywę z limitem czasu:

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

W ten sposób wyeliminowałem problem migotania i uniknąłem kosztownej operacji wstawiania DOM przy każdym kliknięciu. Stało się to kosztem użycia dwóch zmiennych zasięgu w tym samym celu zamiast jednej, ale jak dotąd jest to zdecydowanie najlepsza opcja.

Próbowałem, ng-cloakale wciąż mruga. Poniższy kod pozbądź się ich całkowicie.

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

Żadne z wyżej wymienionych rozwiązań nie działało dla mnie. Następnie postanowiłem spojrzeć na faktyczną funkcję i zdałem sobie sprawę, że kiedy uruchomiono „$ scope.watch”, wstawiało wartość w polu nazwy, co nie miało tak być. Więc w kodzie ustawiłem i oldValue i newValue

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

Zasadniczo, gdy w tym przypadku zostanie uruchomiony zakres.watch, AngularJS monitoruje zmiany w zmiennej nazwy (model.value)

Chciałbym by owinąć <ul>z<div ng-cloak>

Ja osobiście zdecydowałem się użyć ng-classatrybutu zamiast ng-show. Odniosłem dużo większy sukces na tej trasie, szczególnie w przypadku okien wyskakujących, które zawsze nie są wyświetlane domyślnie.

Co było kiedyś <div class="options-modal" ng-show="showOptions"></div>

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

display: nonedomyślnie CSS dla klasy modów opcji . Klasa show zawiera display:blockCSS.

Unikaj łamania linii

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

Działa z Firefoksem 45.0.1

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