ionic-framework Ionic AngularJS extensions Modal windows
Example
Ionic has it's own extension for displaying a modal window. Modals can be created by inserting the template straight to the view with a <script> tag or by using a separate template file. In this example we are assuming you have a html file named modal-template.html in a folder called templates. You set the template path in the modal initialisation function with fromTemplateUrl.
Creating the modal object in the scope
HTML
<ion-modal-view>
<ion-header-bar>
<h1>Modal title</h1>
</ion-header-bar>
<ion-content>
<p>Modal content</p>
</ion-content>
</ion-modal-view>
Controller
$ionicModal.fromTemplateUrl('/templates/modal-template.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
Control the modal
You can then control the modal with the following commands.
Open modal
$scope.modal.show();
Close modal
$scope.modal.hide();
Remove modal
$scope.modal.remove();
Modal events
You can listen to modal events with the following functions.
Modal is hidden
$scope.$on('modal.hidden', function() {
// Do something when modal is hidden
});
Modal is removed
$scope.$on('modal.removed', function() {
// Do something when modal is removed
});
