$ionicPopover

关联: ionicPopover controller.

Popover是一个可以浮在app内容上的一个视图框

常用于以下情况:
  • 显示当前视图的更多信息
  • 选择一个常用的工具或配置
  • 提供一个列表执行你的选择

需将弹出窗口的内容放在<ion-popover-view>元素内。

实例该文档来自ionic中文网ionic-china

<p>
  <button ng-click="openPopover($event)">Open Popover</button>
</p>

<script id="my-popover.html" type="text/ng-template">
  <ion-popover-view>
    <ion-header-bar>
      <h1 class="title">My Popover Title</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
    </ion-content>
  </ion-popover-view>
</script>
angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicPopover) {

  // .fromTemplate() 方法
  var template = '<ion-popover-view><ion-header-bar> <h1 class="title">My Popover Title</h1> </ion-header-bar> <ion-content> Hello! </ion-content></ion-popover-view>';

  $scope.popover = $ionicPopover.fromTemplate(template, {
    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() {
    // 执行代码
  });
});

方法

fromTemplate(templateString, options)

参数 类型 说明
templateString string

使用字符串作为模板弹窗的内容

options object

将选项传递给初始化方法

fromTemplateUrl(templateUrl, options)

参数 类型 说明
templateUrl string

从url加载模板

options object

将选项传递给初始化方法

  • 返回: promisepromise(ionic-china中文网文档)ionicPopover控制器的实例