Как работает двустороннее связывание данных (data binding) в AngularJS?

Как работает двустороннее связывание данных в AngularJS

Отличный вопрос! Давайте разберёмся с механизмом двустороннего связывания данных (two-way data binding) в AngularJS. Это одна из ключевых фич фреймворка, которая позволяет синхронизировать модель (JavaScript-объекты) и представление (HTML) в реальном времени.

1. Основной принцип: $scope и digest cycle

AngularJS использует цикл дайджеста (digest cycle) для отслеживания изменений. Когда вы используете директиву ng-model, AngularJS:

• Подписывается на события DOM (например, input, change)
• При изменении поля ввода запускает $digest — проверку всех привязанных переменных
• Если значение изменилось — обновляет представление и модель

// Упрощённая схема работы
// 1. Пользователь вводит текст
// 2. Срабатывает событие input
// 3. AngularJS запускает $digest()
// 4. Проверяет: изменилось ли $scope.name?
// 5. Если да — обновляет {{ name }} в HTML

2. Грязная проверка (Dirty Checking)

AngularJS не использует геттеры/сеттеры (как Vue.js) или прокси (как Vue 3). Вместо этого он хранит "чистую" копию значения и сравнивает её с текущей. Если значения различаются — это "грязное" изменение.

// Упрощённая реализация dirty checking
function digest() {
    var watchers = []; // список всех привязок
    
    // Для каждой привязки:
    watchers.forEach(function(watcher) {
        var oldValue = watcher.lastValue;
        var newValue = watcher.getCurrentValue();
        
        if (oldValue !== newValue) { // "грязная" проверка
            watcher.listener(newValue, oldValue); // обновить представление
            watcher.lastValue = newValue;
        }
    });
}

3. Как AngularJS узнаёт об изменениях?

Есть два пути:

• События DOM: ng-model подписывается на input, keydown, blur и т.д.
• Ручной вызов: когда вы меняете $scope.name в коде, AngularJS не узнает об этом автоматически. Нужно вызвать $scope.$apply() или $timeout, которые запускают digest cycle.

// Пример с setTimeout (без $apply)
setTimeout(function() {
    $scope.name = 'Jane Doe'; // Изменение не отобразится!
}, 2000);

// Правильный вариант
setTimeout(function() {
    $scope.$apply(function() {
        $scope.name = 'Jane Doe'; // Теперь работает
    });
}, 2000);

// Или используем $timeout (встроенная обёртка)
$timeout(function() {
    $scope.name = 'Jane Doe'; // Работает без $apply
}, 2000);

4. Одностороннее vs Двустороннее связывание

• Одностороннее (one-way binding): {{ name }} — только от модели к представлению. Изменение в HTML не влияет на модель.
• Двустороннее (two-way binding): ng-model="name" — синхронизация в обе стороны. Изменение в поле → модель, изменение модели → поле.

5. Практический пример с пояснениями

// app.js
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $timeout) {
    $scope.name = 'John';
    
    // Имитация задержки (асинхронное обновление)
    $timeout(function() {
        $scope.name = 'Jane'; // Это вызовет digest cycle
    }, 3000);
    
    // Функция для ручного изменения
    $scope.changeName = function() {
        $scope.name = 'Bob';
    };
});

<!-- index.html -->
<div ng-app="myApp" ng-controller="myCtrl">
    <!-- Двустороннее связывание -->
    <input type="text" ng-model="name">
    <p>Текущее имя: {{ name }}</p>
    
    <!-- Кнопка для ручного изменения -->
    <button ng-click="changeName()">Изменить на Bob</button>
</div>

Важно знать:

• AngularJS запускает digest cycle автоматически после событий: ng-click, ng-change, $http, $timeout, $interval
• Если вы используете нативные setTimeout/setInterval/AJAX — нужно вызывать $scope.$apply()
• Производительность: при большом количестве привязок (1000+) digest cycle может тормозить
• В Angular (2+) используется другой механизм — Zone.js и Change Detection

Надеюсь, теперь стало понятнее! Двустороннее связывание — это мощный инструмент, но важно понимать его механику, чтобы избежать багов с асинхронными операциями.