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

Обзор

Директива ngIf удаляет или воссоздаёт часть дерева DOM на основе выражения {expression}. Если выражение, присвоенное 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.