案例:ionic案例     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<html ng-app="ionicApp">
2
    <head>
3
        <meta charset="utf-8">
4
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
5
        <title>W3xue教程(w3xue.com)</title>
6
        <link href="/css/ionic1.0.1/ionic.min.css" rel="stylesheet">
7
        <script src="/js/ionic1.0.1/ionic.bundle.min.js"></script>
8
        <script type="text/javascript">
9
        angular.module('ionicApp', ['ionic'])
10
        .controller( 'AppCtrl',['$scope','$ionicPopover','$timeout',function($scope,$ionicPopover,$timeout){
11
12
          $scope.popover = $ionicPopover.fromTemplateUrl('my-popover.html', {
13
            scope: $scope
14
          });
15
16
          // .fromTemplateUrl() 方法
17
          $ionicPopover.fromTemplateUrl('my-popover.html', {
18
            scope: $scope
19
          }).then(function(popover) {
20
            $scope.popover = popover;
21
          });
22
23
24
          $scope.openPopover = function($event) {
25
            $scope.popover.show($event);
26
          };
27
          $scope.closePopover = function() {
28
            $scope.popover.hide();
29
          };
30
          // 清除浮动框
31
          $scope.$on('$destroy', function() {
32
            $scope.popover.remove();
33
          });
34
          // 在隐藏浮动框后执行
35
          $scope.$on('popover.hidden', function() {
36
            // 执行代码
37
          });
38
          // 移除浮动框后执行
39
          $scope.$on('popover.removed', function() {
40
            // 执行代码
41
          });
42
43
        }])
44
      </script>
45
    </head>
46
    <body ng-controller="AppCtrl">
47
      <p>
48
      <button ng-click="openPopover($event)">打开浮动框</button>