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

видимость:

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

---

производительность:

The {{}} - это гораздо медленнее.

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

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

---

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

---

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

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

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

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

---

обновление 28.11.2014 (но может и не по теме):

в угловом 1.3 x функциональность. Поэтому вы можете привязать значение выражения/атрибута один раз (будет привязан, когда != '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 зарегистрирует наблюдатель (выражение часов), который состоит только из переменной.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

предпочтительно использовать ngBind вместо {{ expression }}, если шаблон на мгновение отображается браузером в исходном состоянии перед компиляцией AngularJS. Поскольку ngBind является атрибутом элемента, он делает привязки невидимыми для пользователя во время загрузки страницы.

An альтернативный вариант к этой проблеме будет использовать ngCloak

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

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