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

Директива ngHide показывает или скрывает заданный HTML-элемент, в зависимости от выражения, переданного атрибуту ngHide. Элемент показывается или скрывается путём удаления или добавления CSS-класса ng-hide к элементу. Класс .ng-hide предопределён в AngularJS и устанавливает стиль отображения в none (используя флаг !important). Для режима CSP добавьте angular-csp.css в ваш HTML-файл (см. ngCsp).

<!-- when $scope.myValue is truthy (element is hidden) -->
<div ng-hide="myValue" class="ng-hide"></div>

<!-- when $scope.myValue is falsy (element is visible) -->
<div ng-hide="myValue"></div>

Когда выражение .ngHide принимает значение true, к атрибуту класса элемента добавляется CSS-класс .ng-hide, что приводит к его скрытию. При значении false CSS-класс .ng-hide удаляется из элемента, и он перестаёт быть скрытым.

Почему используется !important?

Возможно, вас интересует, почему для CSS-класса .ng-hide используется !important. Это потому, что селектор .ng-hide легко переопределить более сильными селекторами. Например, изменение стиля отображения элемента списка HTML может привести к появлению скрытых элементов. Эта проблема усугубляется при работе с CSS-фреймворками.

Использование !important гарантирует, что поведение отображения и скрытия будет работать как ожидается, несмотря на любые конфликты между специфичностью CSS-селекторов (когда !important не используется с конфликтующими стилями). Если разработчик решит переопределить стили, чтобы изменить способ скрытия элемента, то для этого достаточно использовать !important в своём CSS-коде.

Переопределение .ng-hide

По умолчанию класс .ng-hide будет стилизовать элемент со стилем display:none!important. Если вы хотите изменить поведение скрытия с ngShow/ngHide, это можно сделать, переопределив стили для класса .ng-hide в CSS:

.ng-hide {
//this is just another form of hiding an element
display:block!important;
position:absolute;
top:-9999px;
left:-9999px;
}

По умолчанию переопределять в CSS ничего не нужно, и анимации будут работать вокруг стиля отображения.

Примечание об анимациях с ngHide

Анимации в ngShow/ngHide работают с событиями отображения и скрытия, которые срабатывают, когда выражение директивы принимает значение true и false. Эта система работает подобно системе анимации в ngClass, за исключением того, что для вас добавляется и удаляется CSS-класс .ng-hide, а не ваш собственный CSS-класс.

//
//a working example can be found at the bottom of this page
//
.my-element.ng-hide-add, .my-element.ng-hide-remove {
  transition:0.5s linear all;
}

.my-element.ng-hide-add { ... }
.my-element.ng-hide-add.ng-hide-add-active { ... }
.my-element.ng-hide-remove { ... }
.my-element.ng-hide-remove.ng-hide-remove-active { ... }

Обратите внимание, что начиная с версии AngularJS 1.2.17 (и 1.3.0-beta.11), нет необходимости изменять свойство display на block во время анимационных состояний — ngAnimate будет автоматически управлять переключением стилей.