Animate popover for IONIC Framework

IONIC Framework PopOver


Instantiated by the $ionicPopover service.

Animate popover
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


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.


Boolean whether this popover is currently shown.


Hide this popover instance.

Popover timeout or some function hide this popover a promise which is resolved when the popover is finished animating out.


popover removed this function instance from the DOM and clean up.

Popover removed or finished animating out.

Animate popover

Popover Example code.

  <button ng-click="openPopover($event)">Open Popover</button>

<script id="my-popover.html" type="text/ng-template">
      <h1 class="title">This my Popover</h1>

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.closePopover = function() {
  //Cleanup the popover when we're done with it!
  $scope.$on('$destroy', function() {
  // Execute action on hide popover
  $scope.$on('popover.hidden', function() {
    // Execute action
  // Execute action on remove popover
  $scope.$on('popover.removed', function() {
    // Execute action

Animate popover for IONIC Framework Dev2Tricks 5 of 5
IONIC Framework PopOver $ionicPopover Instantiated by the $ionicPopover service. Animate popover Animate popover Today D...

Share this

Related Posts

Next Post »