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>
点击按钮就会出现一个动态的浮动框效果,以上代码仅供参考。