Описание тега angularjs-ng-if

Директива AngularJS 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's.addClass()метод, а затем элемент удаляется. Когда ngIf воссоздает элемент, добавленный класс будет потерян, потому что исходное скомпилированное состояние используется для регенерации элемента.

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

ngIf docs