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

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

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

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

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

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

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

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

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

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

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

Видимость:

Пока ваш 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выводить некоторые данные в таблицу с несколькими привязками на строку. Привязки перевода, выходные данные фильтра, которые выполняются в каждом дайджесте области.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Причина, по которой 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 :

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

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

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

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

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

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

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

http://corpus.hubwiz.com/2/angularjs/16125872.html см. этот сайт.