ionic-modal-nav v1.2.0
Ionic Modal Nav
Angular service used to orchestrate multiple states within an $ionicModal
.
This can control the modal for an entire application or just when the users needs navigation within a modal body.
Installation
npm install --save ionic-modal-nav
Usage
Inlcude as a module dependency:
import 'ionic-modal-nav';
angular.module('app', [
'ionic',
...
'IonicModalNav'
]);
If you are not using ES6, you can use browserify to transpile and manually reference the file in your index.html file
Or you can reference the es5 version of the file, found in src/
called ionic-modal-nav-es5.js
(credit to @zeeshan-m for this)
Optionally configure modal options:
angular.module('app')
.config((IonicModalNavServiceProvider) => {
IonicModalNavServiceProvider.setModalOptions({
animation: "slide-in-up", //supports whatever Ionic supports
focusFirstInput: false,
backdropClickToClose: true,
hardwareBackButtonClose: true
});
});
Inject into your controllers:
class Controller {
constructor(IonicModalNavService) {
'ngInject';
...
Any state intended to be viewed in the IonicModalNav needs to point to the
ionic-modal-nav
view name:
$stateProvider.state('modal-view', {
views: {
'ionic-modal-nav@': {
template: "<ion-view>... YOUR CONENT HERE ...</ion-view>"
}
}
});
API
IonicModalServiceProvider.setModalOptions({options})
Allows users to configure the modal nav similar to how Ionic allows.
@params.options
@params.options.animation - The animation to show & hide with.
@params.options.focusFirstInput - Whether to autofocus the first input of the modal when shown.
Will only show the keyboard on iOS, to force the keyboard to show on Android,
please use the Ionic keyboard plugin.
@params.options.backdropClickToClose - Whether to close the modal on clicking the backdrop.
@params.options.hardwareBackButtonClose - Whether the modal can be closed using the hardware back
button on Android and similar devices.
IonicModalNavService.show(modalState, data)
Open the modal and transition to the given modal state with no animation.
Cache the backView
and the currentView
so we can restore proper state once
the modal is closed.
@param {string} modalState - Modal state name
@param {object} data - State data
IonicModalNavService.go(modalState, data)
Wrapper around the usual $state.go()
. If data is passed, it will be sent.
@param {string} modalState
@param {object} state data
IonicModalNavService.goBack(data)
Wrapper around usual $ionicHistory.goBack()
. If data is passed, the incoming state can react
by subscribing to onBack(callback)
@param {object} data
IonicModalNavService.hide(data)
Closes the IonicModalNav
. If data is passed, the incoming state can react by subscribing to
onClose(calback)
@param {object} data
IonicModalNavService.destroy()
Destroy the instance of IonicModalNav
(probably never used)
Callback handlers
IonicModalNavService.onBack(callback)
Register a callback
function to react to a modal state going backwards.
@param {Function} callback
IonicModalNavService.onClose(callback)
Register a callback
function to react to the IonicModalNav
closing.
@param {Function} callback