AngularJS: Почему ng-bind лучше, чем {{}} в angular?

401

Я был в одном из угловых выступлений, и один из упомянутых людей ng-bindлучше, чем {{}}обязательный.

Одна из причин - ng-bindпоместить переменную в список отслеживания, и только при изменении модели данные будут выдвинуты для просмотра, с другой стороны, {{}}будет каждый раз интерполировать выражение (я полагаю, это угловой цикл) и выдвигать значение, даже если значение изменилось или нет.

Также сказано, что если на экране мало данных, которые вы можете использовать, {{}}и проблема с производительностью не будет видна. Может кто-нибудь пролить свет на этот вопрос для меня?

Наир
источник
3
Не могли бы вы проверить, если мой ответ лучше
Константин Красс
{{}}, на мой взгляд, не практично, зритель увидит ваш тег до полной загрузки данных. Интересно, собирается ли когда-нибудь команда Angular решить эту проблему?
Джерри Лян
2
@Blazemonger: Разве вы не можете просто включить атрибут ng-cloak для предотвращения мгновенного отображения шаблонов?
супершнее

Ответы:

322

Если вы не используете ng-bind, вместо этого что-то вроде этого:

<div>
  Hello, {{user.name}}
</div>

вы можете увидеть фактическое Hello, {{user.name}}за секунду до user.nameразрешения (до загрузки данных)

Вы могли бы сделать что-то вроде этого

<div>
  Hello, <span ng-bind="user.name"></span>
</div>

если это проблема для вас.

Другое решение заключается в использовании ng-cloak.

Голографический принцип,
источник
3
Исходя из того, что вы говорите, производительность не снизится, если мы будем использовать {{}}? Мне сказали, что если вы будете использовать {{}} каждый раз, это будет инерполировать и генерировать результат, даже если модель не изменится.
Наир
4
А как использовать ng-bind, если я не хочу заключать user.name в тег span? Если я использую фигурные скобки, я получу чистое имя, без тегов HTML
Виктор
5
@KevinMeredith это выглядит так, когда HTML загружен, а angular - нет (пока). Помните, что речь идет о клиентских шаблонах. Вся интерполяция должна быть сделана в браузере, загружающем приложение. Обычно угловые нагрузки достаточно быстрые, чтобы это не было заметно, но в некоторых случаях это становится проблемой. Итак, ng-cloakбыл изобретен, чтобы исправить эту проблему.
голографический принцип
17
для меня это не ответ на вопрос, почему ngBind лучше. Это просто, как использовать ngBind вместо аннотации {{}} и ссылки на ngCloak.
Константин Красс
4
@Victor есть также место, ng-bind-templateгде вы можете объединить оба подхода: ng-bind-template="Hello, {{user.name}}"здесь привязка все еще обеспечивает повышение производительности и не вносит дальнейших
вложений
543

Видимость:

Пока ваш 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').

Это полезно, когда вы не ожидаете, что ваша привязка изменится.

Использование: Место ::до привязки:

<ul>  
  <li ng-repeat="item in ::items">{{item}}</li>
</ul>  
<a-directive name="::item">
<span data-ng-bind="::value"></span>

Пример:

ng-repeatвыводить некоторые данные в таблицу с несколькими привязками на строку. Привязки перевода, выходные данные фильтра, которые выполняются в каждом дайджесте области.

Константин Красс
источник
32
это лучший ответ
NimChimpsky
13
Из того, что я могу сказать из источника (по состоянию на 2014-11-24), фигурная интерполяция обрабатывается так же, как директива (см. AddTextInterpolateDirective () в ng / compile.js). Он также использует $ watch, поэтому DOM не трогается, если текст не изменяется, он не «грязно проверяет и обновляет» его при каждом $ digest, как вы утверждаете. Что делается для каждого $ digest, так это то, что вычисляется интерполированная строка результата. Он просто не присваивается текстовому узлу, если он не изменяется.
Матти Вирккунен
6
Я написал тест производительности для внутренней оценки. Он имел 2000 записей в ng repeat и отображал 2 атрибута в объекте, то есть привязки 2000x2. Привязки различаются: первая привязка была просто привязкой в ​​промежутке. У секунд была привязка и какой-то простой html. Результат: ng-bind был быстрее - около 20% для каждой области применения. Без проверки кода кажется, что дополнительный простой HTML с фигурным выражением в элементе HTML занимает еще больше времени.
Константин Красс
2
Просто хочу указать, что согласно тестам здесь: jsperf.com/angular-bind-vs-brackets, кажется, показывают, что скобки быстрее, чем связывание. (Примечание: такты - количество операций в секунду, поэтому чем дольше, тем лучше). И, как отмечалось в предыдущих комментариях, их механизмы наблюдения в конечном итоге идентичны.
Уоррен
1
Поскольку вы не предоставляете никакого источника, я даю вам один: ng-perf.com/2014/10/30/… "ng-bind быстрее, потому что он проще. Интерполяция должна пройти дополнительные этапы проверки контекста, jsonification значения и многое другое. что делает его немного медленнее. "
Константин Красс
29

ng-bind лучше, чем {{...}}

Например, вы можете сделать:

<div>
  Hello, {{variable}}
</div>

Это означает, что весь текст, Hello, {{variable}}вложенный в него, <div>будет скопирован и сохранен в памяти.

Если вместо этого вы делаете что-то вроде этого:

<div>
  Hello, <span ng-bind="variable"></span>
</div>

Только значение значения будет сохранено в памяти, а angular зарегистрирует наблюдателя (выражение наблюдения), который состоит только из переменной.

Брайан
источник
7
С другой стороны, ваш DOM глубже. В зависимости от того, что вы делаете, в больших документах это может повлиять на производительность рендеринга.
Stephband
2
Да, я думаю так же, как и @stephband. Если вы просто хотите отобразить имя и фамилию, например. Почему не просто интерполяция? Он будет работать так же, потому что он будет запускать те же часы в 1 дайджесте. Например: <div> {{firstName}} {{lastName}} </ div> == <div> <span ng-bind = "firstName"> </ span> <span ng-bind = "lastName"> </ span> </ div> .. И первый выглядит лучше. Я думаю, это во многом зависит от того, что вы хотите, но в конце они оба имеют свои преимущества и недостатки.
pgarciacamou
3
<div ng-bind-template="{{ var1 }}, {{ var2}}"></div>является альтернативой {{}} и выполняет такие функции, как ng-bind
northamerican
1
Это не яблоки для яблок - вы вводите элемент span в одном, а не в другом. Пример с ng-bindбудет более сопоставимым с <div>Hello, <span>{{variable}}</span></div>.
иконоборчество
15

По сути, синтаксис с двойным вьющимся выражением более естественно читается и требует меньше ввода.

В обоих случаях вывод одинаковый, но ... если вы решите продолжить, {{}}есть вероятность, что пользователь будет видеть в течение нескольких миллисекунд, {{}}прежде чем ваш шаблон будет отображен с помощью angular. Так что, если вы заметили, {{}}то лучше использовать ng-bind.

Также очень важно то, что только в вашем index.html вашего углового приложения вы можете отрендерить {{}}. Если вы используете директивы, а затем шаблоны, то у вас нет шансов увидеть это, потому что angular сначала визуализирует шаблон, а затем добавляет его в DOM.

hellopath
источник
5
Интересно, что это не то же самое. Я не получаю вывод по ng-bind = "anArrayViaFactory" vs {{anArrayViaFactory}}. Я сталкивался с этой проблемой при попытке вывести ответ json в прототипе jekyll, но из-за конфликта с похожим шаблоном {{}} я был вынужден использовать ng-bind. Привязка ng внутри блока ng-repeat (элемент в anArrayViaFactory) будет выводить значения.
eddywashere
5

{{...}}подразумевается двусторонняя привязка данных. Но ng-bind на самом деле предназначен для одностороннего связывания данных.

Использование ng-bind уменьшит количество наблюдателей на вашей странице. Следовательно, ng-bind будет быстрее, чем {{...}}. Итак, если вы хотите отображать только значение и его обновления и не хотите отражать его изменение с UI обратно на контроллер, тогда перейдите к ng-bind . Это повысит производительность страницы и сократит время загрузки страницы.

<div>
  Hello, <span ng-bind="variable"></span>
</div>
Тесси Томас
источник
4

Это связано с тем, {{}}что угловой компилятор рассматривает как текстовый узел, так и его родительский элемент, поскольку существует возможность объединения двух {{}}узлов. Следовательно, есть дополнительные линкеры, которые увеличивают время загрузки. Конечно, для некоторых таких случаев разница несущественна, однако, если вы используете это внутри повторителя большого количества элементов, это повлияет на более медленную среду выполнения.

Амбика Сукла
источник
2

введите описание изображения здесь

Причина, по которой Ng-Bind лучше, потому что

Когда ваша страница не загружена, или когда ваш интернет работает медленно, или когда ваш сайт загружен наполовину, вы можете увидеть, что эти типы проблем (проверьте снимок экрана с пометкой «Чтение») будут отображаться на экране, что странно. Чтобы избежать такого, мы должны использовать Ng-bind

Викас Калапур
источник
1

У ng-bind тоже есть свои проблемы. Когда вы пытаетесь использовать угловые фильтры , лимиты или что-то еще, у вас могут возникнуть проблемы, если вы используете ng-bind . Но в другом случае ng-bind лучше в UX- стороне. Когда пользователь открывает страницу, он / она увидит (10 мс-100 мс), что печатает символы ( {{...}} ), поэтому ng-bind лучше ,

Хазарапет Тунанян
источник
1

В {{}} есть некоторая проблема с мерцанием, например, когда вы обновляете страницу, тогда для краткого спама времени выявляется выражение. Поэтому мы должны использовать ng-bind вместо выражения для отображения данных.

Гаурав рой
источник
0

ng-bindтакже безопаснее, потому что он представляет htmlсобой строку.

Так, например, '<script on*=maliciousCode()></script>'будет отображаться в виде строки и не будет выполняться.

raneshu
источник
0

Согласно 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 :

<div ng-bind="my.name"></div>

или выполните интерполяцию, как показано ниже:

<div>{{my.name}}</div>

или так с помощью атрибутов ng-cloak в AngularJs:

<div id="my-name" ng-cloak>{{my.name}}</div>

нг-плащ, избегайте мигать на дом и подождите, пока все будет готово! это равно атрибуту ng-bind ...

Алиреза
источник