Angularjs - елементами ng-cloak / ng-show блимають

У мене проблема в angular.js з директивою / класом ng-cloakабо ng-show.

Chrome працює чудово, але Firefox викликає миготіння елементів з ng-cloakабо ng-show. IMHO це викликано перетворенням 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 / МЕНШИ:

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

У мене була подібна проблема і з'ясувалося, що якщо у вас клас, який містить переходи, елемент буде блимати. Я намагався додати ng-плащ без успіху, але, знявши перехід, кнопка перестала блимати.

Я використовую іонний фреймворк, і контур кнопки має цей перехід

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

Просто перезапишіть клас, щоб видалити перехід, і кнопка перестане блимати.

Оновлення

Знову на ionic з’являється мерехтіння при використанні ng-show / ng-hid. Додавання наступних 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-hid", як у <div ng-show="expression" ng-hide>, щоб переконатися, що він почався приховано. Директива ng-show після цього додасть / видалить клас ng-hid.

Спробуйте вимкнути Firebug . Я серйозно. Це допомагає в моєму випадку.

Застосуйте прийняту відповідь і переконайтесь, що Firebug у вашому Firefox перетворений вимкнено : натисніть F12, а потім вимкніть Firebug для цієї сторінки - маленьку кнопку у верхньому правому куті.

Насправді є дві окремі проблеми, які можуть спричинити проблему мерехтіння, і ви можете зіткнутися з однією або обома з них.

Проблема 1: нг-плащ наноситься занадто пізно

Це питання вирішується так, як визначено в багатьох відповідях на цій сторінці, щоб переконатися, що AngularJS завантажений в голову. Див. Документ ngCloak :

Для найкращого результату сценарій angular.js повинен бути завантажений у головний розділ html-файлу; альтернативно, правило css (вище) повинно бути включене у зовнішній таблицю стилів програми.

Проблема 2: нг-плащ знімається занадто рано

Ця проблема, швидше за все, виникає, коли на вашій сторінці є багато 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встановлено значення true після того, як ви не хочете, щоб мерехтіння було готове розкрити користувачеві.

Здається, що Проблема 1 - це проблема, з якою стикається ОП, але інші виявляють, що рішення не працює або лише частково працює, тому що замість них також потрапляє проблема 2 .

Важлива примітка. Не забудьте застосувати розчини як до того, як ng-плащ наноситься занадто пізно, так і незабаром видаляється. Вирішення лише однієї з цих проблем може не полегшити симптоми.

Ми зіткнулися з цією проблемою в нашій компанії і вирішили її, додавши в CSS-стилі "display: none" для цих мерехтливих елементів ng-show. Нам взагалі не довелося використовувати ng-плащ. На відміну від інших у цій темі, ми відчували цю проблему в Safari, але не в Firefox чи Chrome - можливо, через ліниву помилку перефарбовування Safari в iOS7 .

Чому це варто, у мене подібний випуск ng-плаща не працював. Можливо, варто перевірити ваше додаток / сайт із увімкненим кешем для повторного використання вихідних файлів, щоб побачити, чи це допомагає.

З моїм запуском із мерехтінням я тестував DevTools open та кеш-вимкнення. Залишивши панель закритою кеш-пам'яттю, виправлено мою проблему.

Зберігання наведених нижче тверджень у тезі виправлено цю проблему

<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замість ng-show. ng-if повністю видаляє та відтворює елемент у DOM та допомагає уникнути блимання ng-шоу.

Я використовую ionic фреймворк, додавання стилю css може не працювати для певних обставин, ви можете спробувати використовувати ng-if замість ng-show / ng-hid

посилання: 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 = одна сторінка & q = ng-show% 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;"в основний розділ вмісту, потім використовуючи jQuery (я вже використовував його на сторінці), $('#main-div-id').show();коли все було завантажено після отримання даних з сервера;

Я дійсно знайшов пропозицію з Веб-журналу Ріка Страля, виправив мою проблему чудово (оскільки у мене все-таки виникала дивна проблема, коли ng-плащ моргав сирим {{код}} часом, особливо під час запуску 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 отримав контроль.

Я спробував усі відповіді вище, і нічого не вийшло. Використовуючи ionic для розробки гібридної програми, намагався зробити повідомлення про помилку не мерехтінням. Я вирішив свою проблему, додавши до мого елемента клас ng-hid. У мого div вже є ng-show, щоб показати елемент, коли є помилка. Додаючи ng-hid, встановіть, щоб div не відображався перед завантаженням кута. Не потрібно плащок або додавання кутових до голови.

ЯК з наведеного обговорення

[ng-cloak] {
                display: none;
            }

є ідеальним способом вирішення проблеми.

Я використовую ng-show у директиві, щоб показати та приховати спливаючі вікна.

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

Ніщо з перерахованого вище не працювало для мене, і використання ng-if замість ng-show було б надмірним. Це означатиме видалення та додавання всього спливаючого вмісту в 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'}">

Жодне з перерахованих вище рішень не працювало для мене. Тоді я вирішив переглянути фактичну функцію і зрозумів, що коли «$ range.watch» був запущений, він вводив значення в поле імені, яке не повинно було бути таким. Тож у коді я встановив і oldValue, і newValue

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

По суті, коли в цьому випадку запускається domain.watch, AngularJS контролює зміни змінної імені (model.value)

Я б завернув <ul>з a<div ng-cloak>

Я особисто вирішив використовувати ng-classатрибут, а не theng-show . Я мав набагато більше успіхів у цьому маршруті, особливо для спливаючих вікон, які завжди не відображаються за замовчуванням.

Що раніше було <div class="options-modal" ng-show="showOptions"></div>

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

при цьому CSS для класу мод опцій 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';">