Улучшить эту документацию Посмотреть исходный код 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 воссоздаёт элементы с использованием их состояния компиляции. Примером такого поведения является ситуация, когда атрибут класса элемента непосредственно изменяется после его компиляции, например, с помощью метода .addClass() jQuery, а затем элемент удаляется. При воссоздании элемента ngIf добавленный класс будет потерян, потому что для регенерации элемента используется исходное состояние компиляции.

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