як працює зв’язування та перетравлення в AngularJS?

Одне, що відрізняє AngularJS від інших фреймворків JavaScript-MVC, - це здатність перетворювати пов'язані значення з JavaScript у HTML за допомогою прив'язок. Angular робить це "автоматично", коли ви присвоюєте будь-яке значення змінній $ scope.

Але наскільки це автоматично? Іноді Angular не піднімає зміну, тому мені потрібно зателефонувати $ scope. $ Apply () або $ scope. $ Digest (), щоб повідомити кутовий про отримання змін. Іноді, коли я запускаю будь-який із цих методів, він видає помилку і повідомляє, що дайджест уже триває.

Оскільки прив'язки (все, що знаходиться в фігурних дужках {{}} або атрибути ng), повторюються eval, то чи означає це, що Angular постійно опитує об'єкт $ scope для пошуку змін, а потім виконує eval для надсилання цих змін до DOM / HTML? Або AngularJS якимось чином розгадав використання магічних змінних, які запускають події, які запускаються, коли значення змінної змінюється або призначається? Я ніколи не чув про те, щоб він повністю підтримувався всіма браузерами, тож сумніваюся.

Як AngularJS відстежує свої прив'язки та змінні області?

На додаток до розділу документації, знайденого Марком, я думаю, ми можемо спробувати перерахувати всі можливі джерела змін.

1. Взаємодія користувача з входами HTML ( 'текст' , 'номер' , 'url' , 'електронна пошта' , 'радіо' , 'прапорець' ). AngularJS має inputDirective . вводи "текст", "номер", "url" та "електронна пошта" прив'язують обробник слухача для подій "введення" або "введення клавіш". Обсяг викликів обробника слухачів . $ Apply . 'radio' та 'checkbox' прив'язують подібний обробник для події кліку.
2. Взаємодія користувача з виділеним елементом. AngularJS має selectDirective з подібною поведінкою під час події "зміни".
3. Періодичні зміни за допомогою служби очікування $ $, яка також робить $ rootScope. $ Apply () .
4. eventDirectives (ngClick тощо) також використовують сферу застосування. $ apply .
5. $ http також використовує $ rootScope. $ apply () .
6. Зміни за межами світу AngularJS повинні використовувати сферу застосування. $ Застосовуйте, як відомо.

Як ви виявили, це не опитування, а використання його внутрішнього циклу виконання, тому вам потрібно використовувати $ apply () або $ digest (), щоб запустити речі.

Пояснення Мішко є досить ґрунтовним, але трохи не вистачає того, що Angular просто намагається змусити $ scope повернутися до чіткого внутрішнього стану, коли що-небудь відбувається в його власному контексті. Це може зайняти досить багато стрибків між станами моделей, тому також тому ви не можете покладатися на те, що $ watch () спрацьовує лише один раз, а також тому, чому ви повинні бути обережними з налаштуванням відносин між моделями вручну, інакше ви потрапите в нескінченні кругові оновлення.