ionic Floating Box

$ionicPopover

$ionicPopover is a view that can float over the app content.

It can achieve the following functionalities:

• Display more information on the current page.
• Select some tools or configurations.
• Provide an action list on the page.

Methods

fromTemplate(templateString, options)
or
fromTemplateUrl(templateUrl, options)

Parameter Description:

templateString: Template string.

templateUrl: URL of the loaded template.

options: Initialization options.

Example

HTML Code Section

<p>
<button ng-click="openPopover($event)">Open Floating Box</button>
</p>
<script id="my-popover.html" type="text/ng-template">
<ion-popover-view>
  <ion-header-bar>
    <h1 class="title">My Floating Box Title</h1>
  </ion-header-bar>
  <ion-content>
    Hello!
  </ion-content>
</ion-popover-view>
</script>

fromTemplateUrl Method

angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', ['$scope', '$ionicPopover', '$timeout', function($scope, $ionicPopover, $timeout) {

  $scope.popover = $ionicPopover.fromTemplateUrl('my-popover.html', {
    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();
  };
  // Clear floating box
  $scope.$on('$destroy', function() {
    $scope.popover.remove();
  });
  // Execute after hiding the floating box
  $scope.$on('popover.hidden', function() {
    // Execute code
  });
  // Execute after removing the floating box
  $scope.$on('popover.removed', function() {
    // Execute code
  });

}])

We can also use the template as a string and implement the popover using the .fromTemplate() method:

fromTemplate Method

angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', ['$scope', '$ionicPopover', '$timeout', function($scope, $ionicPopover, $timeout) {

  $scope.popover = $ionicPopover.fromTemplateUrl('my-popover.html', {
    scope: $scope
  });
  // .fromTemplate() method
  var template = '<ion-popover-view><ion-header-bar> <h1 class="title">My Floating Box Title</h1> </ion-header-bar> <ion-content> Hello! </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();
};
// Clear the popover
$scope.$on('$destroy', function() {
    $scope.popover.remove();
});
// Execute after hiding the popover
$scope.$on('popover.hidden', function() {
    // Execute code
});
// Execute after removing the popover
$scope.$on('popover.removed', function() {
    // Execute code
});