Запобігайте тимчасовому відображенню подвійних фігурних фігурних фігурних знаків перед тим, як angular.js компілює / інтерполює документ

298

Здається, це головна проблема в IE, коли для завантаження є декілька зображень / сценаріїв, може бути досить багато часу, коли відображається буквальне значення {{stringExpression}}в розмітці, а потім зникає, коли робиться кутовий з його компіляцією / інтерполяцією документ.

Чи є загальна причина, чому це станеться, що вказуватиме на те, що я роблю щось взагалі неправильно, або є відомий спосіб запобігти цьому?

angularjs

— JeremyWeir
джерело

6

Це може допомогти: branchandbound.net/blog/web/2013/08/some-angularjs-pitfalls

— Ісмаїл

Сказане було правильним рішенням

— Едмунд Рохас

283

Я думаю, що ви шукаєте ngCloakдирективу: https://docs.angularjs.org/api/ng/directive/ngCloak

З документації:

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

Директива може бути застосована до <body>елемента, але кращим використанням є застосування декількох ngCloak директив до невеликих частин сторінки, щоб дозволити прогресивне відображення подання браузера

— pkozlowski.opensource
джерело

1

Щоб уникнути необробленого кутового HTML-коду, ngCloakпоширена / найкраща практика? Здається, що це не мозг, але я не досвідчений в AngularJS.

— Кевін Мередіт

32

Я не думаю, що це спрацює, якщо ви завантажите всі сценарії в кінці тіла.

— trusktr

8

Ааа, зачекайте, nvm, відповідь LOAS - це рішення, якщо ви остаточно завантажуєте сценарії. Використовуйте клас .ng-cloak.

— trusktr

3

Завантажте сценарій angularjs у <head>розділі вашого HTML, ngCloakщоб він був ефективним.

— Мустафа

1

Я можу підтвердити, що він ідеально працює, якщо я завантажую angular.jsв <head>розділ своєї сторінки.

— Арон Лорінц

197

Також ви можете використовувати замість {{hello}}.

http://jsfiddle.net/4LhN9/34/

— Ендрю Джослін
джерело

94

Однією з особливостей ng-bind, яку іноді не помічають, є те, що ви можете вказати текст для відображення під час завантаження Angular: loading ... . З'явиться "завантаження ...", після чого буде замінено, як тільки визначено myScopeProperty.

— Марк Райкок

@MarkRajcok: дякую за пораду! Я поняття не мав. Це дуже просто і елегантно і вирішує проблему, яку я сам мав.

— Джим Раден

9

Якщо вам потрібно кілька виразів, використовуйте ngBindTemplate. Наприклад, завантаження ...

— Марк Райкок

27

Ви також можете зробити {{привіт || 'loading ...'}}

— Ендрю Джослін

5

@AndyJoslin Nice. При такому підході кутовий js-скрипт повинен знаходитися в голові, на відміну від нижньої частини сторінки, щоб уникнути появи {{}} виразів при завантаженні сторінки.

— s_t_e_v_e

51

Щоб підвищити ефективність підходу class = 'ng-cloak' під час останнього завантаження скриптів, переконайтеся, що в заголовку документа завантажено наступний css:

.ng-cloak { display:none; }

— ЗАНЯТТЯ
джерело

4

Додавання! Важливо, це не погана ідея.

— eomeroff

12

Не visibility: hiddenбуло б краще?

— 1313

2

@eomeroff, але !importantчи зламати CSS (погана річ) для просування стилю, який потрібно вибрати, правда? Він порушує правила вибору CSS.

— Кевін Мередіт

5

ІМХО, це один із випадків!

— lex82

3

@Mark Я б здогадався, що "видимість: приховано" все одно надасть простір, необхідний для розмітки шаблону, тоді як "display: none" взагалі нічого не відображає. Маючи лише приховану видимість, будь-які зовнішні елементи можуть раптом руйнуватися до справжнього внутрішнього розміру, замість того, щоб зростати до розміру з нічого. Я гадаю, що це все, що віддається перевазі. :)

— Джеймс Вілкінс

40

Просто додайте прихований CSS на головну сторінку або в один із своїх CSS-файлів:

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

Тоді ви можете використовувати директиву ngCloak відповідно до звичайної практики Angular, і вона буде працювати навіть перед завантаженням самого Angular.

Це саме те, що робить Angular: код в кінці angular.js додає вищезазначені правила CSS на голову сторінки.

— Беннетт Макльвей
джерело

+1 Я сам придумав [ngcloak]селектор, але це більш повно.

— П’єр Генрі

1

Дивовижна відповідь! Я завантажую Angular в кінці тіла, тому ngCloak недоступний, і він все ще блимає {{}}. Це і виправило це.

— Скотті

21

У свій css додайте наступні

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

А потім у свій код можна додати директиву ng-cloak. Наприклад,

<div ng-cloak>
   Welcome {{data.name}}
</div>

Це воно!

— Натан Сеневіратн
джерело

6

Ви також можете використовувати ng-attr-src="{{variable}}"замість, src="{{variable}}"а атрибут буде згенерований лише після того, як компілятор скомпонує шаблони. Про це йдеться в документації: https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings

— Мартін Шюллер
джерело

3

Я згоден з відповіддю @ pkozlowski.opensource, але клас ng-clock не працював для мене з використанням ng-повтору. тому я хотів би порекомендувати вам використовувати клас для простого розмежувального вираження, наприклад {{name}} та директиви ngCloak для ng-повтору.

<div class="ng-cloak">{{name}}<div>

і

<li ng-repeat="item in items" ng-cloak>{{item.name}}<li>

— Джейсон
джерело

Дякуємо, що помітили мені помилку

— Джейсон