Перерисовывает ли AngularJS DOM?

Когда angular применяет фильтры - он перерисовывает DOM или меняет местами уже существующие элементы ?
  • Вопрос задан
  • 2929 просмотров
Решения вопроса 3
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
чта? фильтры дергаются на каждый $digest цикл. Если фильтр меняет значение, то меняется DOM. Меняется DOM - вне зависимости от того каким образом он меняется, выполняется перерисовка страницы или ее части.

Либо уточните вопрос. Подозреваю что вас интересуют случаи комбинации ngRepeat и фильтров для коллекций. Если вместо "перерисовывания" вы имеете в виду создание нод - то ngRepeat старается использовать уже существующие ноды. Уточните.
Ответ написан
@lega
Вы можете проверить конкретный случай, например пометить один элемент, например изменить текст/цвет. После чего спровоцировать "перерисовку", если все отработает корректно, а текст/цвет останется, то этот элемент был не тронут (не "пересоздан").

ng-repeat создает соответствия элемент массива <-> элемент DOM, на подобии match[ $id(model) ] = element, если при следующей "перерисовке" нет DOM элемента для элемента массива match[ $id(model) ] == null, то создается новый DOM элемент. "Ключ $id(model)" можно изменить через track by.
Ответ написан
Комментировать
miraage
@miraage
Старый прогер
Если вы имеете ввиду фильтр через пайп - он лишь меняет значение.

<span class="date" data-ng-bind="user.created_at | date:'medium'"></span>
<span class="date">{{ user.created_at | date:'medium' }}</span>


В данной ситуации будет создан watcher, который обрабатывает выражение сервисом $parse.
Будет изменяться лишь содержание контейнера, а сам он перерисовываться не будет.

Если речь идет о ngRepeat, то он тоже не перерисовывает элементы, а лишь добавляет/удаляет изменения.
Но если вы замените объект, по которому ведется итерация - тогда будет перерисовка. Пример:

<ul>
  <li data-my-directive data-ng-repeat="user in users"> ... </li>
</ul>

// Создаем коллекцию
// link-функция в myDirective вызовется для foo и bar
$scope.users = [{name: 'foo'}, {name: 'bar'}];

// Добавит объект, перерисовки не будет
// link-функция в myDirective вызовется только для baz
$scope.users.push({name: 'baz'});

// Удалим первый элемент - тоже не перерисует
// Вызывается event $destroy в scope элемента
$scope.users.splice(0, 1);

// А вот теперь коллекция изменилась
// Вызывается event $destroy для foo bar baz
// Все перерисуется, link-функция в myDirective вызовется для alice и bob
$scope.users = [{name: 'alice'}, {name: 'bob'}];


// UPD

Если речь идет о ngRepeat с фильтром - будет перерисовка лишь тех объектов, которые удалились и потом добавились.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы