Различия между ng-bind и ng-cloak в angularjs
В этом вопросе почему ng-bind лучше, чем {{}} в angular?
Я понял различия между {{}} и ng-bind. С другой стороны, я могу использовать ng-cloak вместо ng-bind.
Теперь мой вопрос в том, каковы различия между ng-bind и ng-cloak?
Ответы
Ответ 1
Они выполняют ту же работу относительно.
Взглянув на api docs, вы можете найти то, что они точно.
Директива ngCloak используется для предотвращения короткого отображения шаблона Angular html браузером в его исходной (не скомпилированной) форме во время загрузки вашего приложения. Используйте эту директиву, чтобы избежать нежелательного эффекта мерцания, вызванного отображением шаблона html.
Директива ng-cloak - это встроенная директива Angular, которая скрывает все элементы на странице, которые содержат директиву.
<div ng-cloak>
<h1>Hello {{ foo }}</h1>
</div>
После завершения загрузки браузера и этапа компиляции шаблона
рендеринг, Angular удалит атрибут элемента ngCloak и элемент
станет видимым.
Атрибут ngBind сообщает Angular заменить текстовое содержимое указанного HTML-элемента на значение данного выражения и обновить текстовый контент при изменении значения этого выражения.
Использование ng-bind вместо {{ }} приведет к тому, что unrendered {{ }} отобразит вместо пустых элементов, которые будут отображаться. Пример сверху можно переписать следующим образом, что предотвратит
страница от мерцания с помощью {{ }}:
<div>
<h1>Hello <span ng-bind="foo"></span></h1>
</div>
Ответ 2
Вы можете найти такие вещи в Angular Api Docs.
ng-cloak - это просто правило css, которое устанавливает стиль display: none !important, поэтому ваше выражение {{}} не отображается до замены фактическими данными.
https://docs.angularjs.org/api/ng/directive/ngCloak
Пока ng-bind является самим выражением.
Ответ 3
Когда вы используете ng-bind, браузер игнорирует это, а после загрузки angular он связывает значение в представлении.
Если вы используете ng-cloak, {{}} по-прежнему будет отображаться на короткое время, но как только angular будет загружен и проанализирован, он будет пропускать {{}} до компиляции.
Ответ 4
Из документации
Директива ngCloak используется для предотвращения шаблона Angular html от кратковременного отображения браузером в его сыром (нескомпилированном) когда приложение загружается. Используйте эту директиву, чтобы избежать нежелательный эффект мерцания, вызванный отображением шаблона html.
https://docs.angularjs.org/api/ng/directive/ngCloak
Ответ 5
В практическом смысле, если вы передадите свою модель в виде с сервера, то ng-cloak в порядке - когда страница отобразится, данные вашего вида будут заполнены. Однако, если вы используете более удобный для мобильных устройств подход к загрузке вашего html и загрузке ваших данных и, возможно, локализации с помощью дополнительного вызова, то ng-model предотвращает {{}} мерцание между загрузкой страницы и получением ваших данных. Тем не менее, я нахожу ng-модель недостаточной, поскольку ее нельзя использовать повсеместно, поэтому я обычно помещаю ng-show в контейнер, который предоставляет представление после того, как данные были извлечены, и установлен флаг.
