Улучшить эту документацию Просмотреть исходный код 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 принимает истинное значение, то к атрибуту класса элемента добавляется CSS-класс .ng-hide, что скрывает элемент. Если выражение ложно, то 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.3.0-beta.11, нет необходимости изменять свойство display на block во время анимаций — ngAnimate автоматически будет обрабатывать изменение стилей для вас.