Скрыть скобки Angular до загрузки javascript

У меня есть несколько бит HTML, например

<p class="noresults">{{numberOfContacts}} Results Are Available</p>

Можно ли скрыть {{numberOfContacts}} до загрузки Angular? Так что просто скажем Results Are Available

У меня есть некоторые решения, такие как скрытие всего тела до загрузки Angular, но я бы предпочел не делать этого, если это возможно.

ОТВЕТЫ

Ответ 1

Да, используйте ng-cloak. Просто добавьте class="ng-cloak" или ng-cloak к элементу, подобному этому

Использование директивы <div ng-cloak></div>

Использование класса <div class="ng-cloak"></div>

Это просто набор правил CSS с display: none !important и, поскольку Angular предоставил ваш DOM, он удаляет ng-плащ, чтобы был видимым элемент.

Ответ 2

используйте <span ng-bind="numberOfContacts" /> вместо {{numberOfContacts}}

Ответ 3

Иногда, даже если я использовал ng-cloak, я все еще мог видеть скобки на несколько секунд. Добавив следующий стиль, разрешил мою проблему:

[ng-cloak]
{
  display: none !important;
}

Подробнее см. ссылку .

Надеюсь, что это поможет: D

Ответ 4

Обычно это проблема только при работе со сложным контентом на действительно медленных устройствах. В таких случаях может быть краткий момент, когда браузер отображает HTML в документе, в то время как AngularJS анализирует HTML, готовится и обрабатывает директивы. В течение этого промежутка времени все встроенные шаблонные выражения, которые вы определили, будут видны пользователю. Большинство устройств в настоящее время имеют довольно хорошие браузеры, которые достаточно быстра, чтобы это не было проблемой. Существует два способа решения проблемы.

  • Избегайте использования встроенных выражений шаблона и придерживайтесь директивы ng-bind.
  • (Лучше) Используйте директиву ng-cloak, которая скроет содержимое, пока Angular не закончит его обработку. В принципе, директива ng-cloak использует CSS для скрытия элементов, а Angular удаляет класс CSS при обработке содержимого, гарантируя, что пользователь никогда не видит символы {{и}} выражения шаблона. Одна из стратегий, которую следует учитывать, - это использовать ng-cloak непосредственно в элементе body, который гарантирует, что пользователь увидит пустой браузер, когда AngularJS загрузится. Однако вы можете быть более конкретным, применяя его к частям документа, где есть встроенные выражения.

Я видел проблемы с ng-cloak, которые не работают при добавлении к элементу. Раньше я работал над этой проблемой, просто добавляя класс ng-cloak к элементу.

Ответ 5

Вы можете использовать ng-bind вместо выражения, например

<span ng-bind="data"></span>