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

директива в модуле ng

Обзор

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

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

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

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

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

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

По умолчанию класс .ng-hide стилизует элемент с display: none !important. Если вы хотите изменить поведение скрытия с помощью ngShow/ngHide, вы можете просто переопределить стили для класса .ng-hide CSS. Обратите внимание, что селектор, который нужно использовать, фактически .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 для переключения между элементами, может случиться, что и показываемый, и скрываемый элементы будут видимы очень короткое время.

Это обычно происходит, когда включен модуль ngAnimate, но фактические анимации для ngShow/ngHide не определены. Internet Explorer чаще всего страдает от этой проблемы.

Существует несколько способов решения этой проблемы:

Отключить анимации для затронутых элементов.
Использовать ngIf или ngSwitch вместо ngShow/ngHide.
Использовать специальный CSS-селектор ng-hide.ng-hide-animate для установки {display: none} или подобного на затронутых элементах.
Использовать ng-class="{'ng-hide': expression} вместо ngShow/ngHide.
Определить анимацию для затронутых элементов.

Информация о директиве

Эта директива выполняется на уровне приоритета 0.
Эта директива может использоваться как multiElement

Использование

в качестве элемента:

<ng-hide
  ng-hide="expression">
...
</ng-hide>

в качестве атрибута:
```
<ANY
  ng-hide="expression">
...
</ANY>
```

Аргументы

Параметр	Тип	Подробности
ngHide	`expression`	Если выражение выражение имеет истинное/ложное значение, то элемент скрывается/отображается соответственно.

Анимации

Анимация	Происходит
addClass `.ng-hide`	После того, как выражение `ngHide` вычисляется как истинное значение, и непосредственно перед тем, как содержимое будет установлено в скрытое состояние.
removeClass `.ng-hide`	После того, как выражение `ngHide` вычисляется как ложное значение, и непосредственно перед тем, как содержимое будет установлено в видимое состояние.

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

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

Нажмите здесь, чтобы узнать больше о шагах, участвующих в анимации.

Примеры

Простой пример, анимирующий непрозрачность элемента:

Более сложный пример, с различными анимациями отображения/скрытия:

© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 3.0.
https://code.angularjs.org/1.8.2/docs/api/ng/directive/ngHide