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来进行内容的包含，如下：

  
    编辑
    修改
    删除    
  

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

点击调用

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