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

391

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

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

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

Показать ещё 2 комментария
Теги:
ng-bind

12 ответов

334
Лучший ответ

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

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

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

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

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

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

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

  • 3
    Исходя из того, что вы говорите, производительность не снизится, если мы будем использовать {{}}? Мне сказали, что если вы будете использовать {{}} каждый раз, это приведет к инерполированию и получит результат, даже если модель не изменится.
  • 0
    Таким образом, ng-bind, кажется, работает лучше, но я не уверен, насколько велика разница в действительности. У меня сложилось впечатление, что это не будет иметь заметного значения, если вы не работаете с действительно большими наборами данных. Иначе я бы не беспокоился об этом аспекте.
Показать ещё 7 комментариев
512

Видимость:

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

  • 0
    Правда, то же самое здесь, как я заметил, это просто использовать в расширении Google Chrome Batarang и проверить вкладку «Производительность» с приложением, использующим {{}}, и приложением, использующим ng-bind.
  • 32
    это лучший ответ
Показать ещё 15 комментариев
29

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

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

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

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

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

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

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

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

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

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

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

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

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

3

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

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

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

Изображение 3654

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

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

1

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

1

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

0

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

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

0

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

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню