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

Я был в одном из презентаций angular, и один из участников встречи, упомянутый ng-bind, лучше, чем {{}}.

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

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

392
21 апр. '13 в 1:34
источник поделиться
12 ответов

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

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

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

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

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

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

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

320
21 апр. '13 в 2:10
источник

Связанные вопросы


Похожие вопросы

Видимость:

Хотя ваши angularjs являются загрузочными, пользователь может видеть ваши размещенные скобки в html. Это можно обработать с помощью ng-cloak. Но для меня это обходное решение, которое мне не нужно использовать, если я использую ng-bind.


Представление:

{{}} Намного медленнее.

Это ng-bind является директивой и помещает наблюдателя в переданную переменную. Таким образом, ng-bind будет применяться только тогда, когда переданное значение действительно изменится.

Скобки с другой стороны будут грязно проверены и обновлены в каждом $digest, даже если это не обязательно.


В настоящее время я создаю большое приложение для одной страницы (~ 500 привязок для каждого представления). Переход от {{}} к строгому ng-bind действительно спас нас примерно на 20% в каждой scope.$digest.


Предложение:

Если вы используете модуль перевода, такой как угловой перевод, всегда предпочитайте директивы перед аннотацией скобок.

{{'WELCOME'|translate}} => <span ng-translate="WELCOME"></span>

Если вам нужна функция фильтра, лучше пойдите для директивы, которая на самом деле просто использует ваш настраиваемый фильтр. Документация для службы $ filter


ОБНОВЛЕНИЕ 28.11.2014 (но, возможно, вне темы):

В Angular bindonce была введена функция bindonce. Поэтому вы можете связать значение выражения/атрибута один раз (будет привязано, когда! = 'Undefined').

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

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

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

Пример:

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

538
30 апр. '14 в 10:43
источник

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

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

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

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

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

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

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

29
08 апр. '14 в 19:02
источник

В принципе, двойной фигурный синтаксис более читабельен и требует меньше ввода текста.

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

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

15
21 апр. '13 в 2:10
источник

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

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

<div>
  Hello, <span ng-bind="variable"></span>
</div>
4
15 марта '17 в 13:35
источник

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

4
23 окт. '14 в 5:28
источник

enter image description here

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

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

2
31 июля '17 в 13:19
источник

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

1
26 мая '16 в 0:02
источник

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

1
09 нояб. '16 в 11:48
источник

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

http://corpus.hubwiz.com/2/angularjs/16125872.html обратитесь на этот сайт.

0
03 апр. '17 в 10:17
источник

Согласно Angular Doc:
Поскольку ngBind является атрибутом элемента, он делает привязки невидимыми для пользователя во время загрузки страницы... это основное отличие...

В основном до тех пор, пока все элементы dom не будут загружены, мы их не увидим, и поскольку ngBind является атрибутом для элемента, он ждет, пока вступят в игру doms... подробнее ниже

ngBind
- директива в модуле ng

Атрибут ngBind сообщает AngularJS заменять текстовое содержимое указанного элемента HTML значением данного выражения и обновлять текстовое содержимое при изменении значения этого выражения.

Как правило, вы не используете ngBind напрямую, но вместо этого вы используете двойную курсорную разметку, например {{expression}}, которая похожа, но менее подробно. p >

Предпочтительно использовать 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-cloak не мигать над домом и ждать, пока все не будет готово! это равно атрибуту ng-bind...

0
22 марта '17 в 16:46
источник

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

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

0
31 окт. '16 в 18:26
источник

Посмотрите другие вопросы по меткам или Задайте вопрос