View Source   Improve this doc

ion-view
Child of ionNavView

A container for view content and any navigational and header bar information. When a view enters and exits its parent ionNavView, the view also emits view information, such as its title, whether the back button should be displayed or not, whether the corresponding ionNavBar should be displayed or not, which transition the view should use to animate, and which direction to animate.

Views are cached to improve performance. When a view is navigated away from, its element is left in the DOM, and its scope is disconnected from the $watch cycle. When navigating to a view that is already cached, its scope is reconnected, and the existing element, which was left in the DOM, becomes active again. This can be disabled, or the maximum number of cached views changed in $ionicConfigProvider, in the view’s $state configuration, or as an attribute on the view itself (see below).

Usage

Below is an example where our page will load with a ionNavBar containing “My Page” as the title.

<ion-nav-bar></ion-nav-bar>
<ion-nav-view>
  <ion-view view-title="My Page">
    <ion-content>
      Hello!
    </ion-content>
  </ion-view>
</ion-nav-view>

View LifeCycle and Events

Views can be cached, which means controllers normally only load once, which may affect your controller logic. To know when a view has entered or left, events have been added that are emitted from the view’s scope. These events also contain data about the view, such as the title and whether the back button should show. Also contained is transition data, such as the transition type and direction that will be or was used.

$ionicView.loaded The view has loaded. This event only happens once per view being created and added to the DOM. If a view leaves but is cached, then this event will not fire again on a subsequent viewing. The loaded event is good place to put your setup code for the view; however, it is not the recommended event to listen to when a view becomes active.
$ionicView.enter The view has fully entered and is now the active view. This event will fire, whether it was the first load or a cached view.
$ionicView.leave The view has finished leaving and is no longer the active view. This event will fire, whether it is cached or destroyed.
$ionicView.beforeEnter The view is about to enter and become the active view.
$ionicView.beforeLeave The view is about to leave and no longer be the active view.
$ionicView.afterEnter The view has fully entered and is now the active view.
$ionicView.afterLeave The view has finished leaving and is no longer the active view.
$ionicView.unloaded The view's controller has been destroyed and its element has been removed from the DOM.

LifeCycle Event Usage

Below is an example of how to listen to life cycle events and access state parameter data

$scope.$on("$ionicView.beforeEnter", function(event, data){
   // handle event
   console.log("State Params: ", data.stateParams);
});

$scope.$on("$ionicView.enter", function(event, data){
   // handle event
   console.log("State Params: ", data.stateParams);
});

$scope.$on("$ionicView.afterEnter", function(event, data){
   // handle event
   console.log("State Params: ", data.stateParams);
});

Caching

Caching can be disabled and enabled in multiple ways. By default, Ionic will cache a maximum of 10 views. You can optionally choose to disable caching at either an individual view basis, or by global configuration. Please see the Caching section in ionNavView for more info.

API

Attr Type Details
view-title
(optional)
 string

A text-only title to display on the parent ionNavBar. For an HTML title, such as an image, see ionNavTitle instead.
cache-view
(optional)
 boolean

If this view should be allowed to be cached or not. Please see the Caching section in ionNavView for more info. Default true
can-swipe-back
(optional)
 boolean

If this view should be allowed to use the swipe to go back gesture or not. This does not enable the swipe to go back feature if it is not available for the platform it's running from, or there isn't a previous view. Default true
hide-back-button
(optional)
 boolean

Whether to hide the back button on the parent ionNavBar by default.
hide-nav-bar
(optional)
 boolean

Whether to hide the parent ionNavBar by default.