AngularJS: Чому ng-bind краще, ніж {{}} в кутовому?

Я був в одному з кутових презентацій, і одна з осіб у згадуваній зустрічі ng-bind- це краще, ніж {{}}обов'язковість.

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

Крім того, сказано, що якщо у вас не так багато даних на екрані, ви можете використовувати, {{}}і питання про продуктивність не буде видно. Чи може хтось пролити трохи світла на це питання для мене?

Якщо ви не використовуєте ng-bind, натомість щось подібне:

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

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

Ви могли б зробити щось подібне

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

якщо це питання для вас.

Ще одне рішення - використовувати ng-cloak.

Видимість:

Поки ваш angularjs завантажується, користувач може побачити розміщені дужки в HTML. З цим можна впоратися ng-cloak. Але для мене це обхідне рішення, яке мені не потрібно використовувати, якщо я його використовую ng-bind.

Продуктивність:

{{}}Це набагато повільніше .

Це ng-bindє директива і помістити спостерігача на пройдений змінної. Тож ng-bindзастосовуватиметься лише тоді, коли передане значення дійсно зміниться .

Кронштейни з іншого боку будуть брудно перевірені та оновлені у кожному $digest , навіть якщо це не потрібно .

Зараз я будую велику програму для однієї сторінки (~ 500 прив’язок за перегляд). Перехід від {{}} до строгого ng-bindврятував нас приблизно на 20% scope.$digest.

Пропозиція :

Якщо ви використовуєте модуль перекладу, такий як angular-translate , завжди віддайте перевагу директивам перед анотацією дужок.

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

Якщо вам потрібна функція фільтра, краще знайдіть директиву, яка фактично просто використовує ваш власний фільтр. Документація для послуги фільтра $

ОНОВЛЕННЯ 28.11.2014 (але може бути поза темою):

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

ng-bind краще, ніж {{...}}

Наприклад, ви можете:

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

Це означає, що весь текст, що Hello, {{variable}}додається, <div>буде скопійований та збережений у пам'яті.

Якщо замість цього ви робите щось подібне:

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

У пам'яті зберігатиметься лише значення цього значення, а кутове буде реєструвати спостерігач (вираз watch), який складається лише з змінної.

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

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

Також дуже важливо те, що лише у index.html вашого кутового додатка ви можете скасувати показ {{}}. Якщо ви використовуєте директиви, тож шаблони, немає шансу побачити це через те, що кутовий спочатку надає шаблон і після додає його до DOM.

{{...}}Мається на увазі двостороннє зв'язування даних. Але, ng-bind насправді призначений для одностороннього прив'язки даних.

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

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

Це пояснюється тим, що за {{}}допомогою кутового компілятора враховується і текстовий вузол, і його батьківський, оскільки існує можливість об'єднання 2-х {{}}вузлів. Отже, існують додаткові лінкери, які додають час завантаження. Звичайно, для кількох таких випадків різниця несуттєва, однак, коли ви використовуєте це всередині ретранслятора великої кількості елементів, це спричинить вплив на більш повільне середовище виконання.

Причина, чому Ng-Bind краще, тому що,

Якщо Ваша сторінка не завантажена або коли ваш Інтернет повільний або коли веб-сайт завантажений наполовину, ви можете побачити такі проблеми (Перевірте знімок екрана з позначкою Прочитання), що буде викликано на екрані, який цілком дивний. Щоб цього не сталося, ми повинні використовувати Ng-bind

У ng-bind також є свої проблеми. Коли ви намагаєтесь використовувати кутові фільтри , ліміт чи щось інше, у вас може виникнути проблеми, якщо ви використовуєте ng-bind . Але в іншому випадку ng-bind краще на стороні UX. Коли користувач відкриє сторінку, він / вона побачить (10ms-100ms), що друкують символи ( {{...}} ), тому ng-bind краще .

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

ng-bindє також більш безпечним, оскільки він представляє htmlсобою рядок.

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

За даними Angular Doc:
Оскільки ngBind є атрибутом елемента, він робить прив’язки невидимими для користувача під час завантаження сторінки ... це головна відмінність ...

В основному, поки не завантажуються всі елементи dom , ми не можемо їх побачити, і тому що ngBind є атрибутом елемента, він чекає, поки вступляються в дім ... більше інформації нижче

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

Атрибут ngBind вказує AngularJS замінити текстовий вміст зазначеного елемента HTML на значення заданого виразу та оновити текстовий вміст, коли значення цього виразу зміниться.

Зазвичай ви не використовуєте ngBind безпосередньо , а замість цього використовуєте подвійну фігурну розмітку, наприклад {{вираз}}, яка схожа, але менш багатослівна.

Бажано використовувати ngBind замість {{express}}, якщо шаблон миттєво відображається браузером у своєму сирому стані до того, як 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-плащ уникайте спалаху на домі і чекайте, поки всі будуть готові! це дорівнює атрибуту ng-bind ...

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

http://corpus.hubwiz.com/2/angularjs/16125872.html зверніться до цього сайту.