<p>

<button ng-click="openPopover($event)">打开浮动框</button>

</p>

<script id="my-popover.html" type="text/ng-template">

<ion-popover-view>

  <ion-header-bar>

    <h1 class="title">我的浮动框标题</h1>

  </ion-header-bar>

  <ion-content>

    Hello!

  </ion-content>

</ion-popover-view>

</script>

angular.module('ionicApp', ['ionic'])

.controller( 'AppCtrl',['$scope','$ionicPopover','$timeout',function($scope,$ionicPopover,$timeout){

  $scope.popover = $ionicPopover.fromTemplateUrl('my-popover.html', {

    scope: $scope

  });

  // .fromTemplateUrl() 方法

  $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();

  };

  // 清除浮动框

  $scope.$on('$destroy', function() {

    $scope.popover.remove();

  });

  // 在隐藏浮动框后执行

  $scope.$on('popover.hidden', function() {

    // 执行代码

  });

  // 移除浮动框后执行

  $scope.$on('popover.removed', function() {

    // 执行代码

  });

}])