ionic中的$inoicPopover

ionic中的浮动框$ionicPopover

用ionic也有一段时间了，今天说一下它里面提供的一个小组件：浮动框
浮动框的使用在移动端的项目中已经很少了，只有在少数的一些特殊情况下才会出现。所以官方文档中对于$ionicPopover的介绍也是非常少。

在这里我们简单说一下浮动框的使用方式，仅供大家参考

• 浮动框的初始化

在控制器中注入$ionicPopover服务，通过如下的代码进行浮动框初始化

var app = angular.module("myApp", ["ionic"]);

app.controller("myCtrl", function($scope, $ionicPopover) {
    $ ionicPopover.fromTemplateUrl(
    "template/template.html",
  {
    scope:$scope,
    animation:"slide-in-up"
  }
  ).then(function(modal) {
    $scope.dialog = modal;
  });
  $scope.show = function(e) {
    $scope.dialog.show(e)
  }
});

这里的选项fromTemplateUrl()函数中，指定了调用的模板页面template/template.html，这里在编辑浮动框内嵌模板页面的时候一定要注意使用ion-popover-view来进行内容的包含，如下：

<ion-popover-view>
  <ion-list>
    <ion-item>编辑</ion-item>
    <ion-item>修改</ion-item>
    <ion-item>删除</ion-item>    
  <ion-list>
</ion-popover-view>

在页面中，可以通过实践进行调用

<button ng-click="show($event)">点击调用</button>

点击按钮就会出现一个动态的浮动框效果，以上代码仅供参考。