Ionic Popover - ionic tutorial
The Ionic Popover
- The Ionic Popover component allows us to add a popover menu to our application.
- Popover menu is a contextual menu that is used to provide a hidden menu or extra menu options.
- It is generally used when we have limited space and want to present a list of options.
- Instead of cramming our limited available space, we create some sort of button so that, when clicked, the popover menu can pop up and show these menu items.
- The following screenshot shows a good description of what a popover does in reality:
- This is a regular view.
- The element ion-popover-view is used for creating Popover.
- It is then added to HTML template and the service $ionicPopover is injected into controller.
The Ionic Popover Using Popover
- There are three ways of adding popover. fromTemplate method allows using inline template.
Controller Code
.controller('DashCtrl', function($scope, $ionicLoading, $ionicPopover) {
// .fromTemplate() method
var template = '<ion-popover-view>' + '<ion-header-bar>' +
'<h1 class = "title">Popover Title</h1>' +
'</ion-header-bar>'+ '<ion-content>' +
'Popover Content!' + '</ion-content>' + '</ion-popover-view>';
$scope.popover = $ionicPopover.fromTemplate(template, {
scope: $scope
});
$scope.openPopover = function($event) {
$scope.popover.show($event);
};
$scope.closePopover = function() {
$scope.popover.hide();
};
//Cleanup the popover when we're done with it!
$scope.$on('$destroy', function() {
$scope.popover.remove();
});
// Execute action on hide popover
$scope.$on('popover.hidden', function() {
// Execute action
});
// Execute action on remove popover
$scope.$on('popover.removed', function() {
// Execute action
});
})
- The second and the third way of adding popover is to use fromTemplateUrl method.
- The controller code will be the same for both ways except the fromTemplateUrl value.
- If HTML is added to existing template, the url will be popover.html.
- If we want to place HTML into templates folder, then the url will change to templates/popover.html. Both examples can be seen below.
Controller Code
.controller('MyCtrl', function($scope, $ionicPopover) {
$ionicPopover.fromTemplateUrl('popover.html', {
scope: $scope
}).then(function(popover) {
$scope.popover = popover;
});
$scope.openPopover = function($event) {
$scope.popover.show($event);
};
$scope.closePopover = function() {
$scope.popover.hide();
};
//Cleanup the popover when we're done with it!
$scope.$on('$destroy', function() {
$scope.popover.remove();
});
// Execute action on hide popover
$scope.$on('popover.hidden', function() {
// Execute action
});
// Execute action on remove popover
$scope.$on('popover.removed', function() {
// Execute action
});
})
- Now we will add script with template to the HTML file we are using for calling popover function.
HTML code from Existing HTML file
<script id = "popover.html" type = "text/ng-template">
<ion-popover-view>
<ion-header-bar>
<h1 class = "title">Popover Title</h1>
</ion-header-bar>
<ion-content>
Popover Content!
</ion-content>
</ion-popover-view>
</script>- If we want to create HTML as a separate file, we can create new HTML file in templates folder and use the same code in the above example without script tags.
The new created HTML file
<ion-popover-view>
<ion-header-bar>
<h1 class = "title">Popover Title</h1>
</ion-header-bar>
<ion-content>
Popover Content!
</ion-content>
</ion-popover-view>
- The last thing we need is to create button that will be clicked to show popover.
<button class = "button" ng-click = "openPopover($event)">Add Popover</button>
- Whatever way we choose from above examples, the output will always be the same.
- The following table shows $ionicPopover methods that can be used.
| Method | Option | Type | Detail |
|---|---|---|---|
| initialize(options) | scope, focusFirst, backdropClickToClose, hardwareBackButtonClose |
object, boolean, boolean, boolean |
Scope is used to pass custom scope to popover. Default is the $rootScope. focusFirstInput is used to auto focus the first input of the popover. backdropClickToClose is used to close popover when clicking the backdrop. hardwareBackButtonClose is used to close popover when hardware back button is pressed. |
| show($event) | $event | promise | Resolved when popover is finished showing |
| hide() | / | promise | Resolved when popover is finished hiding. |
| remove() | / | promise | Resolved when popover is finished removing. |
| isShown() | / | Boolean | Returns true if popover is shown or false if it is not. |