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

Ответ 1

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

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

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

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

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

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

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

Ответ 2

Видимость:

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

Ответ 3

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

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

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

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

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

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

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

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

Ответ 10

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

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

Ответ 11

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

Ответ 12

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

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