ionic 浮动框 fromTemplateUrl 方法

2017-07-20 18:26:00
admin
原创
335
<html ng-app="ionicApp">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
        <script type="text/javascript">
        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() {
            // 执行代码
          });

        }])
      </script>
    </head>
    <body ng-controller="AppCtrl">
      <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> 
  </body>
</html>
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227