Popover in ionic

Hi

Popover can be created by using ion-popover-view element. This element should be added to HTML template and $ionicPopover service needs to be injected into controller.

There is a way of adding popover. fromTemplate method allows using inline template.

In your controller add the following line of 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.

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

Thanks...