IONIC Framework PopOver
$ionicPopover
Instantiated by the $ionicPopover service.
 |
| Animate popover |
Animate popover Today Discussed Ionic Framework popover first discussed popover controller and method. Be sure to call remove() function. when you are done with each popover
Three types Popover Events
- popover.shown
- popover.hidden
- popover.removed
Methods
Create a New Popover controller instance.
Param Type Details
options object An options object with the following properties:
{object=} scope The scope to be a child of. Default: creates a child of $rootScope.
{boolean=} focusFirstInput Whether to autofocus the first input of the popover when shown. Default: false.
{boolean=} backdropClickToClose Whether to close the popover on clicking the backdrop. Default: true.
{boolean=} hardwareBackButtonClose Whether the popover can be closed using the hardware back button on Android and similar devices. Default: true.
isShown()
Boolean whether this popover is currently shown.
Hide()
Hide this popover instance.
Popover timeout or some function hide this popover a promise which is resolved when the popover is finished animating out.
removed()
popover removed this function instance from the DOM and clean up.
Popover removed or finished animating out.
Animate popover
Popover Example code.
view.html
<p>
<button ng-click="openPopover($event)">Open Popover</button>
</p>
<script id="my-popover.html" type="text/ng-template">
<ion-popover-view>
<ion-header-bar>
<h1 class="title">This my Popover</h1>
</ion-header-bar>
<ion-content>
Hello!
</ion-content>
</ion-popover-view>
</script>
Controller.js
angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicPopover) {
// .fromTemplate() method
var template = '<ion-popover-view><ion-header-bar> <h1 class="title">My Popover Title</h1> </ion-header-bar> <ion-content> Hello! </ion-content></ion-popover-view>';
$scope.popover = $ionicPopover.fromTemplate(template, {
scope: $scope
});
// .fromTemplateUrl() method
$ionicPopover.fromTemplateUrl('my-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
});
});