Питання Як зв'язування даних працює в AngularJS?


Як зв'язування даних працює в AngularJS рамки

Я не знайшов технічних деталей їх сайт. Більш-менш зрозуміло, як це працює, коли дані поширюються від перегляду до моделі. Але як AngularJS відслідковує зміни властивостей моделі без встановлювачів і геттерів?

Я виявив, що є Переглядачі JavaScript що може зробити цю роботу. Але вони не підтримуються Internet Explorer 6 і Internet Explorer 7. Як же AngularJS знає, що я змінив, наприклад, наступне і відображав цю зміну на вигляд?

myobject.myproperty="new value";

1803
2018-03-13 10:16


походження


Майте на увазі, що оскільки кутовий 1.0.0rc1 потрібно вказати ng-model-instant (docs-next.angularjs.org/api/...), щоб модерніст одухотворений. В іншому випадку воно буде оновлено на випадок розмивання. - Sotomajor
Посилання Марчелло, очевидно, зламане, тому тут це знову: github.com/mhevery/angular.js/blob/master/docs/content/guide/... - riffraff
@orian, це посилання погано. оновлена ​​(я вважаю) однакова - docs.angularjs.org/guide/databinding - Kevin Meredith
Для тих, хто все ще читає це питання, зверніть увагу на те, що Angular 2.0 сильно змінив спосіб використання даних для визначення даних, починаючи з Angular 1.x, щоб працювати з веб-компонентами та вирішити багато питань у відповідях нижче. - aug


Відповіді:


AngularJS запам'ятовує значення та порівнює його з попереднім значенням. Це основна брудна перевірка. Якщо відбувається зміна значення, воно викликає подію зміни.

The $apply() метод, який ви називаєте, коли ви переходите з світу, що не є AngularJS, в світ AngularJS, виклики $digest(). Дайджест - це просто стара брудна перевірка. Він працює на всіх веб-переглядачах і цілком передбачуваний.

Для контрастності брудної перевірки (AngularJS) або зміни слухачів (НокаутJS і Backbone.js): Хоча брудна перевірка може здатися простим і навіть неефективним (я звертаюся до цього пізніше), виявляється, що це семантично коректно весь час, в той час як зміна слухачів має безліч чужих випадків і потрібні такі речі, як відстеження залежностей це більш семантично правильно. Відстеження залежності від KnockoutJ - це розумна особливість проблеми, яка не має AngularJS.

Проблеми зі зміною слухачів:

  • Синтаксис жорстокий, оскільки браузери не підтримують його спочатку. Так, існують проксі-сервери, але у всіх випадках вони не є семантично правильними, і, звичайно, на старих браузерах немає проксі-серверів. Суть в тому, що брудна перевірка дозволяє вам робити POJO, тоді як KnockoutJS і Backbone.js змушують вас успадковуватись від своїх класів і отримувати доступ до своїх даних через доступ.
  • Зміна коалесценції. Припустимо, у вас є масив предметів. Скажімо, ви хочете додати елементи до масиву, як ви циклу додати, кожен раз, коли ви додаєте, стріляють події за зміною, що відображає інтерфейс користувача. Це дуже погано для продуктивності. Що потрібно, щоб оновити інтерфейс лише один раз, наприкінці. Події змінюються занадто дрібно.
  • Зміна слухачів негайно пожежа на установці, що є проблемою, тому що прослуховувач зміни може додатково змінювати дані, що викликає більше подій зміни. Це погано, оскільки у вашому стекі може трапитися кілька подій, що відбуваються одразу. Припустимо, у вас є два масиви, які потрібно зберігати синхронізмом з будь-якої причини. Ви можете додати лише ту чи іншу, але кожен раз, коли ви додаєте, ви запускаєте подію зміни, яка зараз має невідповідний погляд на світ. Це дуже схожа проблема з блокуванням потоку, який JavaScript уникає, оскільки кожний зворотний виклик виконує виключно і до завершення. Зміна подій порушує це, оскільки встановлювачі можуть мати далекосяжні наслідки, які не є наміченими та незрозумілими, що створює проблему потоку повсюдно. Виявляється, те, що ви хочете зробити, - це затримати виконання слухача та гарантувати, що за один раз працює лише один прослуховувач, отже, кожен користувач може змінювати дані, і він знає, що жоден інший код не працює, поки він працює .

Як щодо продуктивності?

Тому може здатися, що ми повільні, оскільки брудна перевірка неефективна. Тут ми повинні дивитися на реальні цифри, а не просто на теоретичні аргументи, але спочатку визначимо деякі обмеження.

Люди:

  • Повільно - Все, що працює швидше, ніж 50 мс, непомітно для людей, і таким чином можна вважати "миттєвим".

  • Обмежений - Ви не можете показати більше, ніж приблизно 2000 одиниць інформації на людину на одній сторінці. Щось більше, ніж це насправді поганий інтерфейс, і люди ніяк не можуть це обробити.

Отже, реальне питання полягає в наступному: скільки порівнянь ви можете робити в браузері за 50 мс? Це важке питання, щоб відповісти, як багато факторів вступають у гру, але ось тестовий випадок: http://jsperf.com/angularjs-digest/6 що створює 10 тисяч спостерігачів. У сучасному браузері це займає трохи менше 6 мс. На Internet Explorer 8 це займає близько 40 мсек. Як видно, це не проблема навіть у повільних браузерах в ці дні. Існує застереження: порівняння повинні бути прості, щоб вписатись у встановлений термін ... На жаль, це занадто легко додати повільне порівняння в AngularJS, тому легко створювати повільні програми, коли ви не знаєте, що ви роблять. Але ми сподіваємося отримати відповідь, надаючи модуль інструментів, який покаже вам, які повільні порівняння.

Виявляється, відеоігри та графічні процесори використовують метод брудної перевірки, зокрема, тому що він узгоджений. Поки вони перевищують частоту оновлення монітора (як правило, 50-60 Гц, або кожні 16,6-20 мс), будь-яка продуктивність над цим стає марною, тому вам краще залучати більше матеріалів, ніж отримувати FPS вище.


2660
2018-03-13 23:47



@Марк - так, у KO ви просто додати .extend ({throttle: 500}), щоб почекати 500 мілісекунд після останньої події зміни, перш ніж діяти на неї. - Daniel Earwicker
Ця вся відповідь відрізняється відмінною, ніж "Поки вони отримують 50 кадрів в секунду, будь-яка продуктивність над цим є марною, оскільки людське око не може це оцінити, так що вам краще набрати більше матеріалу, ніж отримати більше кадрів на секунду". Ця заява абсолютно неправильна залежно від вашої заявки. Око безсумнівно може оцінити більше 50 кадрів в секунду, а також різноманітні проблеми з VR-шоу (читати останні новини від Джона Кармака або Майкла Абраша, особливо останнього розмови GDC 2013 VR), 50 кадрів в секунду насправді є занадто повільним. Крім того, ваша відповідь чудова. Я просто не хочу розповсюдження дезінформації. - Nate Bundy
Просто цікаво, якщо ваш додаток подібний Twitter або коментар потоку / форум, і ви реалізуєте нескінченну прокрутку на основі Angular, ви можете потрапити в "ліміт" 2000 одиниць інформації ". Єдиний коментар може легко містити кілька змінних для імені автора, профілю img, вмісту, datetime і т. Д. Крім того, скажімо, ми маємо гігантський масив для зберігання всіх коментарів / повідомлень, кожен брудний контроль вимагає сканування цього масиву, am Я права? Це призведе до того, що браузер дещо відстає від часу, що є поганим користувачем. Що ви пропонуєте зробити у цьому випадку, щоб забезпечити розумну продуктивність? - Lucas
Зверніть увагу, що заяву можна сказати навпаки: "Брудна перевірка є розумною функцією для проблеми, яка не має нікетоду". ES6 використовує спостережувані, а кутовий - це позбавлення від брудної перевірки. Реальний світ сприйняв цю відповідь і показав, що це неправда. - conical
"Щось, що швидше, ніж 50 мс, непомітно для людей", - це неправда. Під час тестування ми виявили, що наші клієнти можуть легко розрізняти 50-хвилинну латентність оновлення (20 кадрів в секунду) і 16.6 мс затримки (60 кадрів в секунду). Сцени, що працюють на колишній швидкості, поступово погіршують загальну оцінку "як це відчувається", навіть коли люди не свідомо реєстрували частоту кадрів. - Crashworks


Misko вже дав відмінний опис того, як працюють прив'язки даних, але я хотів би додати свою точку зору щодо проблеми продуктивності прив'язування даних.

Як заявив Мішко, приблизно 2000 прив'язок - це місце, де ви починаєте бачити проблеми, але в будь-якому випадку ви не повинні мати більше 2000 елементів інформації на сторінці. Це може бути правдою, але не кожне скріплення даних видиме для користувача. Як тільки ви почнете створювати будь-який вид віджету або сітки даних із двостороннім зв'язком, ви можете легко хіт 2000 прив'язок, не маючи поганого ux.

Розглянемо, наприклад, комбобок, де можна ввести текст, щоб фільтрувати доступні параметри. Такий контроль може мати ~ 150 елементів і все ще буде дуже корисним. Якщо у нього є додаткова функція (наприклад, певний клас на вибраній опції), ви починаєте отримувати 3-5 прив'язок за кожною опцією. Покладіть три з цих віджетів на сторінку (наприклад, один, щоб вибрати країну, інша - вибрати місто в зазначеній країні, а третій - вибрати готель), і ви вже десь між 1000 та 2000 прив'язками.

Або розгляньте сітку даних у корпоративній веб-додаток. 50 рядків на сторінку не є нерозумними, кожен з яких може мати 10-20 стовпців. Якщо ви створите це з ng-повтореннями та / або маєте інформацію в деяких комірках, які використовують деякі прив'язки, ви можете наблизитися до 2000 прив'язків за допомогою цієї сітки.

Я вважаю це таким величезний проблема при роботі з AngularJS, і єдиним рішенням, яке я зміг знайти, - це побудувати віджети без використання двостороннього зв'язування замість використання ngOnce, зняття реєстрації спостерігачів та подібних прийомів, або побудувати директиви, які створюють DOM за допомогою jQuery і Маніпулювання DOM. Я відчуваю, що це перемагає мету використання Angular в першу чергу.

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

TL; DR 
Зв'язування даних може спричинити проблеми продуктивності на складних сторінках.


308
2017-08-22 13:28



Так, я проголошую це. Основна відповідальність нашого додатка полягає в тому, щоб відображати зв'язки між різними об'єктами. Дана сторінка може містити 10 розділів. У кожному розділі є таблиця. У кожній таблиці 2-5 типових фільтрів. У кожній таблиці 2-5 стовпців, кожен з 10 рядків. Дуже швидко ми стикаємося з проблемами перфектів, і йдемо з "аналогічні трюки" варіанти. - Scott Silvi
Чи справедливо сказати, що Angular не лише пов'язаний з даними, а деякі програми, можливо, не хочуть використовувати цю функцію саме з причин, про які інші цитували? Я думаю, що підхід DI та модульність сам по собі коштує багато; магічне автообв'язування добре, але в кожній наявній реалізації є компроміси продуктивності. Спосіб кутового переміщення, безсумнівно, перевершує для більшості веб-програм CRUD, і люди просто натикаються на стіну, намагаючись взяти його до крайності. Було б приємно мати альтернативний спосіб прослуховування подій, але це, можливо, принципово занадто складне для єдиної системи? - Jason Boyd
Тепер кутовий має один спосіб і прив'язує один раз до довідника, щоб допомогти з цією проблемою. Крім того, він тепер має індекси для вашого джерела ретранслятора, який дозволяє змінювати список без перебудови домену для всього вмісту. - Mithon
@ MW Чесно кажучи, я думав, що прив'язка - колись була в центрі. Але, здається, це не так. Це просто те, що ви можете зробити, коли пишете свої власні директиви, в основному пов'язуючи речі без їх перегляду. Однак для нього є модифікація mod: github.com/pasvaz/bindonce - Mithon
Крик від майбутнього для тих, хто читає це: одноразове скріплення тепер є основною функцією в Angular v1.3, читати далі тут: docs.angularjs.org/guide/expression - Nobita


За брудною перевіркою $scope об'єкт

Кутовий підтримує простий array спостерігачів у $scope об'єкти Якщо ви інспектуєте будь-який $scope ви побачите, що він містить array називається $$watchers.

Кожен спостерігач є object що містить серед інших речей

  1. Вираз, який монітор спостерігає. Це може бути просто attribute ім'я або щось складніше.
  2. Останнє відоме значення виразу. Це можна перевірити на поточне обчислене значення виразу. Якщо значення відрізняються, спостерігач запускає функцію та позначає його $scope як брудний
  3. Функція, яка буде виконуватися, якщо спостерігач є брудним.

Як визначаються спостерігачі

Існує багато різних способів визначення спостерігача в AngularJS.

  • Ви можете явним чином $watch ан attribute на $scope.

    $scope.$watch('person.username', validateUnique);
    
  • Ви можете розмістити a {{}} інтерполяція у вашому шаблоні (для вашого поточного буде створений вахтер $scope)

    <p>username: {{person.username}}</p>
    
  • Ви можете попросити директиву, таку як ng-model щоб визначити спостерігача для вас.

    <input ng-model="person.username" />
    

The $digest цикл перевіряє всіх спостерігачів на їхнє останнє значення

Коли ми взаємодіємо з AngularJS за допомогою звичайних каналів (ng-model, ng-repeat тощо), директива буде викликати цикл дайджесту.

Дайджест циклу є глибина перший прохід $scope і всі його діти. Для кожного $scope  object, ми повторимо його $$watchers  array і оцініть всі вирази. Якщо значення нового значення виразу відрізняється від останнього відомих значень, функція спостерігача викликається. Ця функція може перекомпілювати частину DOM, перекомпілювати значення на $scope, викликати ан AJAX  request, що завгодно для цього.

Кожен обсяг проходить, і кожен вираз годинник оцінюється і перевіряється на останнє значення.

Якщо спостерігач спрацьовує, то $scope брудний

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

Функції Watcher можуть змінювати інші атрибути $scope або на батька $scope. Якщо один $watcher функція була спрацьована, ми не можемо гарантувати, що наш інший $scopeS все ще залишаються чистими, і тому ми повторимо весь цикл обробки.

Це тому, що AngularJS має двосторонній зв'язок, тому дані можуть бути передані назад вгору $scopeдерево Ми можемо змінити значення на більш високий $scope що вже було перетравлено. Можливо, ми змінюємо значення на $rootScope.

Якщо $digest брудно, ми виконуємо весь $digest цикл знову

Ми постійно петляємо через $digest цикл, доки не завершиться чистий цикл обробки (все $watch вирази мають те ж саме значення, що й у попередньому циклі), або ми досягаємо ліміту дайджесту. За умовчанням ця межа встановлюється в 10.

Якщо ми досягнемо ліміту дайджесту, AngularJS підніме помилку в консолі:

10 $digest() iterations reached. Aborting!

Дайджест важко на машині, але простий у розробника

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

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

Цей ліміт легко досягти, якщо ви ng-repeat над великим JSON  array наприклад. Ви можете пом'якшити це, використовуючи такі функції, як одноразове прив'язка для компіляції шаблону без створення спостерігачів.

Як уникнути створення надто багатьох спостерігачів

Щоразу, коли ваш користувач взаємодіє з вашим додатком, кожен спостерігач у вашому додатку буде оцінюватися принаймні один раз. Велика частина оптимізації додатка AngularJS зменшує число спостерігачів у вашому $scope дерево Один простий спосіб зробити це - це одноразове скріплення.

Якщо у вас є дані, які рідко змінюються, ви можете пов'язувати його лише один раз за допомогою синтаксису :: так, наприклад:

<p>{{::person.username}}</p>

або

<p ng-bind="::person.username"></p>

Зв'язування буде спрацьовувати тільки тоді, коли містить шаблон і дані будуть завантажені $scope.

Це особливо важливо, коли у вас є ng-repeat з багатьма предметами.

<div ng-repeat="person in people track by username">
  {{::person.username}}
</div>

142
2018-06-02 12:31



Я не згоден з тим, що відповідь має бути на самому верху; існує різниця між знанням чогось і написанням відповідної / детальної відповіді на конкретне запитання. Є кращі способи отримати нагороди. У всякому разі .. - user2864740
Я не сумніваюся, що таке правда, але відповідає на запитання і відповіді :) - user2864740
Відмінна відповідь, що стосується того, як поводиться брудна перевірка і яка її фактична оцінка, одна справа була не надто ясною у відповідь Міско. - bitstrider
Прекрасний і детальний відповідь. @superluminary, спасибі за таку відповідь. Крім того, після прочитання цієї відповіді я прийшов до того моменту, що ми не повинні додати неідемпотентний вираз як вираз, який спостерігається. - Mangu Singh Rajpurohit
Це має бути найвищою відповіддю - Alexandre Bourlier


Це моє основне розуміння. Це може бути неправильно!

  1. Елементи спостерігаються шляхом передачі функції (повернення речі бути дивився) на $watch метод
  2. Зміни до елементів, що переглядаються, потрібно внести в блок коду завернута $apply метод
  3. В кінці кінця $apply в $digest Метод викликається, що йде через кожен з годинників і перевіряє, чи змінилися вони з того часу останній раз $digest біг
  4. Якщо знайдені будь-які зміни, дайджест буде знову викликаний, доки всі зміни стабілізуються.

У нормальному розвитку синтаксис прив'язки даних у HTML повідомляє компілятору AngularJS для створення годин для вас, і методи контролера запускаються всередині $apply вже Отже, для розробника додатків все прозорі.


77
2018-03-13 21:01



коли пристрій запускається? - numan salati
@EliseuMonar Цикл обробки даних відбувається в результаті певної події або викликається $ apply (), він не називається періодично, заснований на таймері. побачити Як функціонує функція годинника AngularJS? і Як працює зв'язування та перетравлення в AngularJS? - remi
@remi, я не стурбований останньою версією AngularJS. Чи вони вже використовують проксі або Object.observe? Якщо ні, вони все ще перебувають у брудній епосі перевірки, яка створює синхронізований цикл, щоб побачити, чи змінилися атрибути моделі. - Eliseu Monar dos Santos
Я прочитав, що дайджест буде працювати максимум в десять разів sitepoint.com/understanding-angulars-apply-digest - user137717


Я сам це довго думав. Без встановлювачів як це робиться AngularJS помітити зміни в $scope об'єкт Чи описує вони їх?

Те, що воно насправді робить це: будь-яке "нормальне" місце, яке ви модифікуєте модель, вже викликано з кишківника AngularJS, тому він автоматично дзвонить $apply для вас після запуску вашого коду. Скажіть, ваш контролер має спосіб, який підключений до ng-click на якийсь елемент Оскільки AngularJS проводить дзвінок цього методу разом для вас, у нього є шанс зробити $apply у відповідному місці. Аналогічно, для виразів, які з'являються прямо в переглядах, вони виконуються шляхом AngularJS так це робить $apply.

Коли документація розповідає про необхідність дзвонити $apply вручну для коду поза AngularJS, мова йде про код, який, коли він запускається, не обумовлений AngularJS сам у стекі дзвінків.


57
2017-09-03 17:45





Пояснення з зображеннями:

Обробка даних вимагає відображення

Посилання на область застосування не є точною посиланням у шаблоні. Коли ви зв'язуєте дані з двома об'єктами, вам потрібен третій, який прослуховує перший і змінює інший.

enter image description here

Тут, коли ви змінюєте <input>, ви торкаєтесь data-ref3. І класичний механізм, що зв'язує дані, зміниться data-ref4. Так як інше {{data}} вирази будуть рухатися?

Події призводить до $ digest ()

enter image description here

Кутовий підтримує a oldValue і newValue від кожного обов'язкового І після кожного Кутова подія, знаменитий $digest() цикл перевірить WatchList, щоб побачити, чи щось змінилося. Ці Кутові події є ng-click, ng-change, $http завершено ... $digest() буде петлі до тих пір, як будь-який oldValue відрізняється від newValue.

У попередньому знімку він помітить, що дані-ref1 та data-ref2 змінилися.

Висновки

Це трохи схоже на яйце і курку. Ви ніколи не знаєте, хто починає, але, сподіваюсь, він працює більшу частину часу, як очікувалося.

Інший момент полягає в тому, що ви легко можете зрозуміти глибину впливу простого зв'язування на пам'ять та процесор. Будемо сподіватися, що настільні комп'ютери мають достатню кількість жиру, щоб це дозволило. Мобільні телефони не такі сильні.


29
2018-05-20 13:33





Очевидно, що періодичної перевірки немає Scope чи є які-небудь зміни в об'єктах, що до нього прикріплені. Не всі об'єкти, пов'язані з обсягом, переглядаються. Область прототипів підтримує a спостерігачі $ $ . Scope тільки повторюється через це $$watchers коли $digest називається .

Кутовий додає переглядачу спостерігачам $$ для кожного з них

  1. {{вираз}} - у ваших шаблонах (і скрізь, де є вираз) або коли ми визначаємо нг-модель.
  2. $ scope. $ watch ('вираз / функція') - у вашому JavaScript ми можемо просто прикріпити об'єкт об'єкта для перегляду кутовий.

$ годинник Функція виконує три параметри:

  1. По-перше, це функція спостерігача, яка просто повертає об'єкт або ми можемо просто додати вираз.

  2. Друга - функція слухача, яка буде викликана при зміні об'єкта. Всі ці речі, такі як зміни DOM, будуть реалізовані в цій функції.

  3. Третій - необов'язковий параметр, який займає логічне значення. Якщо його справжня, кутова глибина спостерігає за об'єктом, і якщо її фальшивий кутовий просто робить посилання на об'єкт.     Грубі реалізація $ watch виглядає так

Scope.prototype.$watch = function(watchFn, listenerFn) {
   var watcher = {
       watchFn: watchFn,
       listenerFn: listenerFn || function() { },
       last: initWatchVal  // initWatchVal is typically undefined
   };
   this.$$watchers.push(watcher); // pushing the Watcher Object to Watchers  
};

Існує цікава річ у кутові називається Дайджест циклу. Цикл $ digest починається в результаті дзвінка до $ scope. $ Digest (). Припустимо, що ви змінили модель $ scope в функції обробника через директиву ng click-click. У цьому випадку AngularJS автоматично запускає цикл $ digest, викликаючи $ digest (). Окрім ng-кліка, існує ще кілька вбудованих директив / служб, які дозволяють змінювати моделі (наприклад, ng-модель, $ timeout і т. Д.). і автоматично запускає цикл обробки $. Грубі реалізація $ digest виглядає так.

Scope.prototype.$digest = function() {
      var dirty;
      do {
          dirty = this.$$digestOnce();
      } while (dirty);
}
Scope.prototype.$$digestOnce = function() {
   var self = this;
   var newValue, oldValue, dirty;
   _.forEach(this.$$watchers, function(watcher) {
          newValue = watcher.watchFn(self);
          oldValue = watcher.last;   // It just remembers the last value for dirty checking
          if (newValue !== oldValue) { //Dirty checking of References 
   // For Deep checking the object , code of Value     
   // based checking of Object should be implemented here
             watcher.last = newValue;
             watcher.listenerFn(newValue,
                  (oldValue === initWatchVal ? newValue : oldValue),
                   self);
          dirty = true;
          }
     });
   return dirty;
 };

Якщо ми використовуємо JavaScript setTimeout () Функція оновлення моделі сфери, Angular не має можливості знати, що ви можете змінити. У цьому випадку ми зобов'язані називати $ apply () вручну, що викликає цикл $ digest. Аналогічним чином, якщо у вас є директива, яка встановлює слухача події DOM та змінює деякі моделі всередині функції обробника, вам потрібно зателефонувати до $ apply (), щоб забезпечити набуття змін. Велика ідея $ застосовується в тому, що ми можемо виконати деякий код, який не знає про Angular, цей код може все-таки змінювати речі у сфері. Якщо ми обернемо цей код у $ apply, він буде дбати про виклик $ digest (). Грубе втілення $ apply ().

Scope.prototype.$apply = function(expr) {
       try {
         return this.$eval(expr); //Evaluating code in the context of Scope
       } finally {
         this.$digest();
       }
};

19
2018-05-22 18:18





AngularJS обробляє механізм зшивання даних за допомогою трьох потужних функцій: $ годинник (),$ digest ()і $ apply (). Велику частину часу AngularJS називає $ scope. $ Watch () і $ scope. $ Digest (), але в деяких випадках вам, можливо, доведеться називати ці функції вручну для оновлення з новими значеннями.

$ годинник () : -

Ця функція використовується для спостереження змін у змінній на об'єкті $.   Він приймає три параметри: вираз, слухач і об'єкт рівності   де об'єкт слухача та об'єкта рівності є необов'язковими параметрами.

$ digest () -

Ця функція повторюється через всі годинники об'єкта $ scope   і його child $ об'єктів об'єкта
     (якщо він є). Коли $ digest () повторюється   над годинником, він перевіряє, чи є значення виразу   змінився Якщо значення змінилося, AngularJS викликає слухача з   нове значення та старе значення. Функція $ digest () викликається   коли AngularJS вважає це необхідним. Наприклад, після кнопки   клік або після виклику AJAX. У вас може бути деякі випадки, коли AngularJS   не називає функцію $ digest () для вас. У цьому випадку ви повинні   називайте це самостійно.

$ apply () -

Кутовий робить автоматично магічним оновленням тільки тих змін моделі, які є   всередині AngularJS контексті. Коли ви робите зміни в будь-якій моделі поза межами   Angular контекст (наприклад, події DOM браузера, setTimeout, XHR або третій   партійні бібліотеки), то вам необхідно інформувати Angular про ці зміни на   виклик $ apply () вручну. Коли закінчується виклик функції $ apply ()   AngularJS називає $ digest () внутрішньо, тому всі прив'язки даних є   оновлено


12
2018-05-16 15:05



це корисно для мене - Jayani Sumudini