Я был в одном из угловых выступлений, и один из упомянутых людей ng-bind
лучше, чем {{}}
обязательный.
Одна из причин - ng-bind
поместить переменную в список отслеживания, и только при изменении модели данные будут выдвинуты для просмотра, с другой стороны, {{}}
будет каждый раз интерполировать выражение (я полагаю, это угловой цикл) и выдвигать значение, даже если значение изменилось или нет.
Также сказано, что если на экране мало данных, которые вы можете использовать, {{}}
и проблема с производительностью не будет видна. Может кто-нибудь пролить свет на этот вопрос для меня?
ngBind
вместо того,{{ expression }}
чтобы шаблон мгновенно отображался браузером в исходном состоянии до того, как Angular его скомпилирует. Поскольку онngBind
является атрибутом элемента, он делает привязки невидимыми для пользователя во время загрузки страницы». - но ничего не сказано о производительности.Ответы:
Если вы не используете
ng-bind
, вместо этого что-то вроде этого:вы можете увидеть фактическое
Hello, {{user.name}}
за секунду доuser.name
разрешения (до загрузки данных)Вы могли бы сделать что-то вроде этого
если это проблема для вас.
Другое решение заключается в использовании
ng-cloak
.источник
ng-cloak
был изобретен, чтобы исправить эту проблему.ng-bind-template
где вы можете объединить оба подхода:ng-bind-template="Hello, {{user.name}}"
здесь привязка все еще обеспечивает повышение производительности и не вносит дальнейшихВидимость:
Пока ваш angularjs загружается, пользователь может увидеть ваши скобки в html. С этим можно справиться
ng-cloak
. Но для меня это обходной путь, который мне не нужно использовать, если я используюng-bind
.Представление:
{{}}
Это гораздо медленнее .Это
ng-bind
является директива и поместить наблюдателя на пройденный переменной. Таким образом, оноng-bind
будет применяться только тогда, когда переданное значение действительно изменится .С другой стороны, скобки будут проверяться и обновляться в каждом
$digest
, даже если в этом нет необходимости .В настоящее время я создаю большое одностраничное приложение (~ 500 привязок за просмотр). Переход от {{}} к строгому
ng-bind
сэкономил нам около 20% в каждомscope.$digest
.Предложение :
Если вы используете модуль перевода, такой как angular-translate , всегда предпочитайте директивы перед скобками.
{{'WELCOME'|translate}}
=><span ng-translate="WELCOME"></span>
Если вам нужна функция фильтра, лучше перейдите к директиве, которая на самом деле просто использует ваш собственный фильтр. Документация для сервиса $ filter
ОБНОВЛЕНИЕ 28.11.2014 (но может и не по теме)
В Angular 1.3x
bindonce
была представлена функциональность. Поэтому вы можете привязать значение выражения / атрибута один раз (будет связано, когда! = 'Undefined').Это полезно, когда вы не ожидаете, что ваша привязка изменится.
Использование: Место
::
до привязки:Пример:
ng-repeat
выводить некоторые данные в таблицу с несколькими привязками на строку. Привязки перевода, выходные данные фильтра, которые выполняются в каждом дайджесте области.источник
ng-bind
лучше, чем{{...}}
Например, вы можете сделать:
Это означает, что весь текст,
Hello, {{variable}}
вложенный в него,<div>
будет скопирован и сохранен в памяти.Если вместо этого вы делаете что-то вроде этого:
Только значение значения будет сохранено в памяти, а angular зарегистрирует наблюдателя (выражение наблюдения), который состоит только из переменной.
источник
<div ng-bind-template="{{ var1 }}, {{ var2}}"></div>
является альтернативой {{}} и выполняет такие функции, как ng-bindng-bind
будет более сопоставимым с<div>Hello, <span>{{variable}}</span></div>
.По сути, синтаксис с двойным вьющимся выражением более естественно читается и требует меньше ввода.
В обоих случаях вывод одинаковый, но ... если вы решите продолжить,
{{}}
есть вероятность, что пользователь будет видеть в течение нескольких миллисекунд,{{}}
прежде чем ваш шаблон будет отображен с помощью angular. Так что, если вы заметили,{{}}
то лучше использоватьng-bind
.Также очень важно то, что только в вашем index.html вашего углового приложения вы можете отрендерить
{{}}
. Если вы используете директивы, а затем шаблоны, то у вас нет шансов увидеть это, потому что angular сначала визуализирует шаблон, а затем добавляет его в DOM.источник
{{...}}
подразумевается двусторонняя привязка данных. Но ng-bind на самом деле предназначен для одностороннего связывания данных.Использование ng-bind уменьшит количество наблюдателей на вашей странице. Следовательно, ng-bind будет быстрее, чем
{{...}}
. Итак, если вы хотите отображать только значение и его обновления и не хотите отражать его изменение с UI обратно на контроллер, тогда перейдите к ng-bind . Это повысит производительность страницы и сократит время загрузки страницы.источник
Это связано с тем,
{{}}
что угловой компилятор рассматривает как текстовый узел, так и его родительский элемент, поскольку существует возможность объединения двух{{}}
узлов. Следовательно, есть дополнительные линкеры, которые увеличивают время загрузки. Конечно, для некоторых таких случаев разница несущественна, однако, если вы используете это внутри повторителя большого количества элементов, это повлияет на более медленную среду выполнения.источник
Причина, по которой Ng-Bind лучше, потому что
Когда ваша страница не загружена, или когда ваш интернет работает медленно, или когда ваш сайт загружен наполовину, вы можете увидеть, что эти типы проблем (проверьте снимок экрана с пометкой «Чтение») будут отображаться на экране, что странно. Чтобы избежать такого, мы должны использовать Ng-bind
источник
У ng-bind тоже есть свои проблемы. Когда вы пытаетесь использовать угловые фильтры , лимиты или что-то еще, у вас могут возникнуть проблемы, если вы используете ng-bind . Но в другом случае ng-bind лучше в UX- стороне. Когда пользователь открывает страницу, он / она увидит (10 мс-100 мс), что печатает символы ( {{...}} ), поэтому ng-bind лучше ,
источник
В {{}} есть некоторая проблема с мерцанием, например, когда вы обновляете страницу, тогда для краткого спама времени выявляется выражение. Поэтому мы должны использовать ng-bind вместо выражения для отображения данных.
источник
ng-bind
также безопаснее, потому что он представляетhtml
собой строку.Так, например,
'<script on*=maliciousCode()></script>'
будет отображаться в виде строки и не будет выполняться.источник
Согласно Angular Doc:
поскольку ngBind является атрибутом элемента, он делает привязки невидимыми для пользователя во время загрузки страницы ... это главное отличие ...
В основном, пока все элементы dom не загружены, мы не можем их видеть, и поскольку ngBind является атрибутом элемента, он ждет, пока doms не вступят в игру ... подробнее ниже
ngBind
- директива модуля нг
В атрибуте ngBind говорит AngularJS заменить текстовое содержание указанного HTML элемента со значением данного выражения, и обновить содержание текста , когда значение этого выражения изменяется.
Как правило, вы не используете ngBind напрямую , но вместо этого вы используете двойную фигурную разметку, например {{expression}}, которая похожа, но менее многословна.
Предпочтительно использовать ngBind вместо {{expression}}, если шаблон мгновенно отображается браузером в исходном состоянии до того, как AngularJS его скомпилирует. Поскольку ngBind является атрибутом элемента, он делает привязки невидимыми для пользователя во время загрузки страницы.
Альтернативное решение этой проблемы будет использование ngCloak директивы. посетите здесь
Для получения дополнительной информации о ngbind посетите эту страницу: https://docs.angularjs.org/api/ng/directive/ngBind
Вы можете сделать что-то вроде этого как атрибут, ng-bind :
или выполните интерполяцию, как показано ниже:
или так с помощью атрибутов ng-cloak в AngularJs:
нг-плащ, избегайте мигать на дом и подождите, пока все будет готово! это равно атрибуту ng-bind ...
источник
Вы можете обратиться к этому сайту, и он объяснит вам, какой из них лучше, поскольку я знаю, что {{}} это медленнее, чем ng-bind.
http://corpus.hubwiz.com/2/angularjs/16125872.html см. этот сайт.
источник