Ionic Floating Frame

From WikiOD

Ionic floating frame[edit | edit source]


$ Ionic Popover[edit | edit source]

$ionicPopover is a view box that can float on the content of the app.

Instance[edit | edit source]

HTML code[edit | edit source]
 <code><p></code>
 <button ng-click="openPopover($event)">Open the floating box</button>
 <code></p></code>
 <script id="my-popover.html" type="text/ng-template">
 <ion-popover-view>
   <ion-header-bar>
     <code><h1 class="title">My Floating Frame Title</h1></code>
   </ion-header-bar>
   <ion-content>
     Hello!
   </ion-content>
 </ion-popover-view>
 </script>
JavaScript code[edit | edit source]
 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 the 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 frame
   $scope.$on('popover.removed', function() {
     // execute code
   });
 
 }])