ionic中的$inoicPopover
ionic中的$inoicPopover
大牧莫邪
发布于 2018-08-27 16:18:16
发布于 2018-08-27 16:18:16
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>点击按钮就会出现一个动态的浮动框效果，以上代码仅供参考。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.05.10 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录