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 correspondingionNavBar
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.
Life cycle events are emitted upwards from the transitioning view’s scope. In some cases, it is desirable for a child/nested view to be notified of the event. For this use case, $ionicParentView
life cycle events are broadcast downwards.
$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. |
$ionicParentView.enter |
The parent view has fully entered and is now the active view. This event will fire, whether it was the first load or a cached view. |
$ionicParentView.leave |
The parent view has finished leaving and is no longer the active view. This event will fire, whether it is cached or destroyed. |
$ionicParentView.beforeEnter |
The parent view is about to enter and become the active view. |
$ionicParentView.beforeLeave |
The parent view is about to leave and no longer be the active view. |
$ionicParentView.afterEnter |
The parent view has fully entered and is now the active view. |
$ionicParentView.afterLeave |
The parent view has finished leaving and is no longer the active view. |
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 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 |
cache-view
(optional)
|
boolean |
If this view should be allowed to be cached or not. Please see the Caching section in Default |
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 |
hide-back-button
(optional)
|
boolean |
Whether to hide the back button on the parent |
hide-nav-bar
(optional)
|
boolean |
Whether to hide the parent |