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

Директива ngHide отображает или скрывает заданный HTML-элемент на основе выражения, предоставленного атрибуту ngHide.

Элемент отображается или скрывается путем удаления или добавления CSS-класса .ng-hide к элементу. CSS-класс .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 принимает истинное значение, к атрибуту класса элемента добавляется класс .ng-hide, что приводит к его скрытию. В случае ложного значения, класс .ng-hide удаляется из элемента, что приводит к отображению элемента.

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

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

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

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

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

.ng-hide:not(.ng-hide-animate) {
  /* These are just alternative ways of hiding an element */
  display: block!important;
  position: absolute;
  top: -9999px;
  left: -9999px;
}

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

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

Анимации в ngShow/ngHide работают с событиями показа и скрытия, которые срабатывают при истинном и ложном значении выражения директивы. Эта система работает так же, как система анимации в ngClass, за исключением того, что необходимо включить флаг !important, чтобы переопределить свойство отображения, чтобы элементы не скрывались во время анимации.

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

.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, нет необходимости изменять свойство отображения на блок во время состояний анимации — ngAnimate автоматически будет обрабатывать переключение стилей для вас.