ionic中的浮動框$ionicPopover

用ionic也有一段時間了，今天說一下它里面提供的一個小組件：浮動框
浮動框的使用在移動端的項目中已經(jīng)很少了，只有在少數(shù)的一些特殊情況下才會出現(xiàn)。所以官方文檔中對于$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()函數(shù)中，指定了調用的模板頁面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>

點擊按鈕就會出現(xiàn)一個動態(tài)的浮動框效果，以上代碼僅供參考。