ionic中的浮動(dòng)框$ionicPopover
用ionic也有一段時(shí)間了戒洼，今天說一下它里面提供的一個(gè)小組件：浮動(dòng)框
浮動(dòng)框的使用在移動(dòng)端的項(xiàng)目中已經(jīng)很少了，只有在少數(shù)的一些特殊情況下才會(huì)出現(xiàn)。所以官方文檔中對(duì)于$ionicPopover的介紹也是非常少。
在這里我們簡(jiǎn)單說一下浮動(dòng)框的使用方式矫钓，僅供大家參考
- 浮動(dòng)框的初始化
在控制器中注入$ionicPopover服務(wù)，通過如下的代碼進(jìn)行浮動(dòng)框初始化
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)
}
});
這里的選項(xiàng)fromTemplateUrl()函數(shù)中铁瞒，指定了調(diào)用的模板頁面template/template.html妙色，這里在編輯浮動(dòng)框內(nèi)嵌模板頁面的時(shí)候一定要注意使用ion-popover-view來進(jìn)行內(nèi)容的包含，如下：
<ion-popover-view>
<ion-list>
<ion-item>編輯</ion-item>
<ion-item>修改</ion-item>
<ion-item>刪除</ion-item>
<ion-list>
</ion-popover-view>
在頁面中慧耍，可以通過實(shí)踐進(jìn)行調(diào)用
<button ng-click="show($event)">點(diǎn)擊調(diào)用</button>
點(diǎn)擊按鈕就會(huì)出現(xiàn)一個(gè)動(dòng)態(tài)的浮動(dòng)框效果身辨，以上代碼僅供參考。
