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

Question

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

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

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

Answer 1

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

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

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

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

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

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

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

Answer 2

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

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

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

Answer 3

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

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

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

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

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

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

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

Answer 4

Видимость:

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

---

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

{{}} является гораздо медленнее.

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

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

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

---

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

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

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

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

---

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

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

Answer 5

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

Answer 6

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

Answer 7

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

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

Answer 8

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

Answer 9

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

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

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

Answer 10

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

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

ngBind
- директива модуля нг

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

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

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

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

для получения дополнительной информации о ngbind посетить эту страницу: https://docs.angularjs.org/api/ng/directive/ngBind

Вы могли бы сделать что-то вроде этого, как атрибут, ngbind:

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

или делать интерполяции, как показано ниже:

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

или этот w ау с нг-плаща атрибутов в AngularJs:

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

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

Answer 11

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

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

Answer 12

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

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