Angularjs-ng-cloak/ng-show elements blink

Jak wspomniano w dokumentacji , powinieneś dodać regułę do CSS, aby ją ukryć na podstawie atrybutu ng-cloak:

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

Używamy podobnych tricków na stronie "Built with Angular" , których źródło można zobaczyć na Githubie: https://github.com/angular/builtwith.angularjs.org

Upewnij się, że AngularJS jest zawarty w head HTML. Zobacz ngCloak doc :

Dla najlepszego wyniku, kątowe.skrypt js musi być wczytany do głowicy sekcja pliku html; alternatywnie, reguła css (powyżej) musi być zawarte w zewnętrznym arkuszu stylów aplikacji.

Nigdy nie miałem szczęścia używać ngCloak. Wciąż migotam pomimo wszystkiego, o czym wspomniano powyżej. Jedynym niezawodnym sposobem uniknięcia flickingu jest umieszczenie treści w szablonie i dołączenie szablonu. W SPA jedynym HTML, który zostanie oceniony przed kompilacją przez Angular, jest twój główny indeks.strona html.

Po prostu weź wszystko wewnątrz ciała i włóż to do osobnego pliku, a następnie:

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

Nigdy nie powinieneś mieć żadnego migotania w ten sposób, jak Angular will skompiluj szablon przed dodaniem go do DOM.

NgBind i ngBindTemplate są alternatywami, 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 cech do CSS / LESS:

[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 dowiedziałem się, że jeśli masz klasę, która zawiera przejścia, element będzie migał. Próbowałem dodać ng-cloak bez powodzenia, ale usuwając Przejście przycisk przestał migać.

Używam ionic framework i button-outline ma to przejście

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

Wystarczy nadpisać klasę, aby usunąć Przejście, a przycisk przestanie migać.

Update

Ponownie na ionic pojawia się migotanie podczas używania ng-Pokaż/ng-Ukryj. Dodanie następującego CSS rozwiązuje ten problem:

.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, w którym <div ng-show="expression"> było początkowo widoczne przez ułamek sekundy, mimo że "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", jak w <div ng-show="expression" ng-hide>, aby upewnić się, że zaczęła się początkowo ukryta. Dyrektywa ng-show w razie potrzeby doda/usunie klasę ng-hide.

Spróbuj wyłączyć Firebug . Mówię poważnie. To pomaga w moim przypadku.

Zastosuj zaakceptowaną odpowiedź, a następnie upewnij się, że Firebugw Twoim Firefoksie 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 są dwa oddzielne problemy, które mogą powodować problem z migotaniem i możesz napotkać jeden lub oba z nich.

Problem 1: ng-cloak jest nakładany zbyt późno

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

Dla najlepszego wyniku, kątowe.skrypt js musi być wczytany do głowicy sekcja pliku html; alternatywnie, reguła css (powyżej) musi być zawarte w zewnętrznym arkuszu stylów aplikacji.

Problem 2: ng-cloak jest usuwany zbyt szybko

Ten problem jest najbardziej prawdopodobny, gdy masz dużo CSS na swojej stronie z regułami kaskadowymi nad sobą i głębsze warstwy CSS migają przed nałożeniem górnej warstwy.

Rozwiązania jQuery w odpowiedziach polegające na dodaniu style="display:none" do twojego elementu rozwiązują ten problem tak długo, jak 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.

Zaczynając od przykładu z pytania:

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

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

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

(musisz zachować ng-cloak, aby uniknąć problemu 1).

Następnie w aplikacji.run set isPageFullyLoaded:

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

Należy pamiętać, że w zależności od tego, co dokładnie robisz, app.bieg może być najlepszym miejscem do set isPageFullyLoaded. Ważne jest, aby upewnić się, że isPageFullyLoaded zostanie ustawiona na true po tym, jak cokolwiek nie chcesz migotać, będzie gotowe do ujawnienia użytkownikowi.

Brzmi to jak Problem 1 jest problemem, w który uderza OP, ale inni odkrywają, że rozwiązanie nie działa lub tylko częściowo działa, ponieważ zamiast tego uderzają Problem 2 .

Ważna uwaga: pamiętaj, aby zastosować rozwiązania również do ng-cloak spóźniony i usunięty wkrótce. Rozwiązanie tylko jednego z tych problemów może nie złagodzić objawów.

Napotkaliśmy ten problem w naszej firmie i rozwiązaliśmy go dodając "display: none" do stylizacji CSS dla migoczących elementów ng-show. W ogóle nie musieliśmy używać ng-cloak. W przeciwieństwie do innych w tym wątku, doświadczyliśmy tego problemu w Safari, ale nie Firefox lub Chrome-prawdopodobnie z powodu błędu leniwego odświeżania Safari w iOS7 .

Jeśli to coś warte, miałem podobny problem ng-cloak nie działa. Może warto sprawdzić aplikację/witrynę z włączoną pamięcią podręczną, aby ponownie wykorzystać pliki źródłowe, aby sprawdzić, czy to pomaga.

Z moim uruchomieniem z migotaniem, testowałem z DevTools open i cache disabled. Pozostawienie panelu zamkniętego z włączoną buforowaniem rozwiązało mój problem.

Zachowanie poniższych instrukcji w znaczniku head naprawił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

Lepiej używać ng-if zamiast ng-show. ng-if całkowicie usuwa i odtwarza element w DOM i pomaga uniknąć migania ng-shows.

Używam ionic framework, 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+flickering+in+ios&source=bl&ots=m2Turk8DFh&sig=8hNiWx26euGR2k_WeyaVzdixJ8k&hl=en&sa=X&redir_esc=y#v=onepage&q=ng-show%20hide%20flickering%20in%20ios&f=false{[4]

Lepiej odwołaj się do dokumentu angular, ponieważ wersja[1.4.9] ma aktualizację poniżej, dzięki której może obsługiwać dyrektywę data-ng-cloak.

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

Nie mogłem uzyskać żadnej z tych metod do działania, więc w końcu zrobiłem następujące. Dla 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 pokazuje się tylko wtedy, gdy kod kontrolera został uruchomiony.

Próbowałem rozwiązania ng-cloak powyżej, ale nadal ma sporadyczne problemy z Firefoksem. Jedynym obejściem, które zadziałało dla mnie, jest opóźnienie ładowania formularza do momentu pełnego załadowania Angular.

Po prostu dodałem ng-INIT w aplikacji i użyłem ng-if po stronie formularza, aby sprawdzić, czy ustawiona przeze mnie 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>

Owijałbym <ul> <div ng-cloak>

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

Doktorzy mówią :" dla najlepszego rezultatu, kątowy.skrypt js musi być załadowany w sekcji head dokumentu html; alternatywnie powyższa reguła css musi być zawarta w zewnętrznym arkuszu stylów wniosku."

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

Próbowałem wszystkich rozwiązań zamieszczonych tutaj i nadal mam migotanie w Firefoksie.

Jeśli komuś to pomoże, rozwiązałem to dodając style="display: none;" do głównego content div, a następnie używając jQuery (używałem go już na stronie) $('#main-div-id').show(); po załadowaniu wszystkiego po pobraniu danych z serwera;

Znalazłem sugestię z dziennika internetowego Ricka Strahla naprawiłem mój problem doskonale (ponieważ nadal miałem dziwny problem z miganiem raw {{code}} NG-cloak czasami, szczególnie podczas uruchamiania Firebug): {]}

Opcja nuklearna: ręczne ukrywanie zawartości

Użycie jawnego CSS jest najlepszym wyborem, więc następujące rzeczy nie powinny być konieczne. Ale wspomnę o tym tutaj, ponieważ daje to pewien wgląd w to, jak można ręcznie ukrywać / pokazywać 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 wykonuje swojej pracy. Po traceniu godziny donikąd postanowiłem w końcu po prostu ręcznie ukryć i pokazać kontener. Pomysł jest prosty – początkowo Ukryj kontener, a następnie pokaż go, gdy Angular zrobi wstępne przetwarzanie i usunie znaczniki szablonu ze strony.

Możesz ręcznie ukryć zawartość i niech będzie widoczny po tym, jak Angular przejmie kontrolę. Do tego użyłem:

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

Zwróć uwagę na styl display: none, który jawnie ukrywa element początkowo na stronie.

Następnie, gdy Angular uruchomi swoją inicjalizację i skutecznie przetworzy znaczniki szablonu na stronie, możesz wyświetlić zawartość. Dla Angular tym "gotowym" wydarzeniem jest aplikacja.funkcja run ():

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

To skutecznie usuwa styl display: none i wyświetla zawartość. By the time app.run () DOM jest gotowy do wyświetlenia z wypełnionymi danymi lub przynajmniej pustymi danymi – Angular ma kontrolę.

Próbowałem wszystkich powyższych odpowiedzi i nic nie działało. Korzystanie z ionic do opracowania aplikacji hybrydowej i próbował zrobić komunikat o błędzie Nie migotać. zakończyłem rozwiązywanie mojego problemu, 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 Ustaw div tak, aby nie wyświetlał się przed załadowaniem angular. Nie jest konieczne ng-cloak ani dodawanie kąta do głowy.

Jak z powyższej dyskusji

[ng-cloak] {
                display: none;
            }

Używam ng-show w dyrektywie do pokazywania i ukrywania wyskakujących okienek.

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

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

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

Potem dodałem inicjalizację do kontrolera odpowiedzialnego za tę dyrektywę z timeout:

$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 zakresu w tym samym celu zamiast jednej, ale jak na razie jest to zdecydowanie najlepsza opcja.

Osobiście zdecydowałem się użyć atrybutu ng-class zamiast ng-show. Miałem o wiele więcej sukcesów w tej trasie, szczególnie w przypadku wyskakujących okien, które zawsze nie są domyślnie wyświetlane.

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

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

Z CSS dla klasy options-modal jest domyślnie display: none. Klasa show zawiera display:block CSS.

Próbowałem ng-cloak ale wciąż krótkie mrugnięcia. Poniższy kod pozbądź się ich całkowicie.

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

Żadne z powyższych rozwiązań nie zadziałało dla mnie. Następnie postanowiłem spojrzeć na rzeczywistą funkcję i zdałem sobie sprawę, że kiedy " $ scope.zegarek " został zwolniony, to było wprowadzenie wartości w polu Nazwa, która nie miała być przypadek. Więc w kodzie ustawiam i oldValue i newValue wtedy

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

Zasadniczo gdy zakres.watch jest uruchamiany w tym przypadku, AngularJS monitoruje zmiany w zmiennej name (model.wartość)

Unikaj przerwania 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';">