Улучшить документацию Посмотреть исходный код ngIf

Обзор

Директива ngIf удаляет или воссоздаёт часть дерева DOM на основе {выражения}. Если выражение, присвоенное ngIf, принимает ложное значение, то элемент удаляется из DOM, в противном случае, копия элемента вставляется обратно в DOM.

ngIf отличается от ngShow и ngHide тем, что ngIf полностью удаляет и воссоздаёт элемент в DOM, а не изменяет его видимость с помощью свойства display CSS. Типичный случай, когда это различие важно, — использование CSS-селекторов, которые зависят от расположения элемента в DOM, таких как псевдоклассы :first-child или :last-child.

Обратите внимание, что при удалении элемента с помощью ngIf его область видимости уничтожается, а при восстановлении элемента создаётся новая область видимости. Область видимости, созданная внутри ngIf, наследует от родительской области видимости, используя прототипное наследование. Важное следствие этого — если ngModel используется внутри ngIf для привязки к примитиву JavaScript, определённому в родительской области видимости. В этом случае любые изменения, внесённые в переменную в дочерней области видимости, перепишут (скрывают) значение в родительской области видимости.

Также ngIf воссоздаёт элементы, используя их состояние компиляции. Пример такого поведения: если атрибут класса элемента непосредственно изменяется после компиляции, например, с помощью метода jQuery .addClass(), а затем элемент удаляется. Когда ngIf воссоздаёт элемент, добавленный класс будет утерян, поскольку для воссоздания элемента используется исходное состояние компиляции.

Кроме того, вы можете использовать анимации через модуль ngAnimate для анимирования эффектов enter и leave.