ng-visibility

This module aims to provide directives ngVisible and ngInvisible which act much like ngShow and ngHide respectively, except with visibility: hidden; instead of display: none;. Both directives work in conjunction with ngAnimate. See below for more information.

Setup

Install

bower install ng-visibility --save

Enable

Add to module dependencies: 'ngVisibility'

angular.module('myApp', ['ngVisibility'])

Example

<div class="fade-example" ng-visible="model.visible === true">
  This will be visible...
</div>

<div class="fade-example" ng-invisible="model.visible !== true">
  This will be invisible...
</div>

Use With ngAnimate

ngInvisible works similarly to ngHide and ngVisible works similarly to ngShow.

.fade-example {
  transition: opacity 1s ease-out;
}

.fade-example.ng-invisible-remove {
  opacity: 0;
}

.fade-example.ng-invisible-remove-active {
  opacity: 1;
}

.fade-example.ng-invisible-add {
  opacity: 1;
}

.fade-example.ng-invisible-add-active {
  opacity: 0;
}

NOTE Be careful not to use transition: all as the visibility property will most likely interfere with your defined transitions.