ionic 浮动框
$ionicPopover
$ionicPopover 是一个可以浮在app内容上的一个视图框。
可以实现以下功能点：
- 在当前页面显示更多信息。
- 选择一些工具或配置。
- 在页面提供一个操作列表。
方法
fromTemplate(templateString, options) 或 fromTemplateUrl(templateUrl, options)
参数说明：
templateString: 模板字符串。
templateUrl: 载入的模板 URL。
options: 初始化选项。
实例
HTML 代码部分
<p>
<button ng-click="openPopover($event)">打开浮动框</button>
</p>
<script id="my-popover.html" type="text/ng-template">
<ion-popover-view>
<ion-header-bar>
<h1 class="title">我的浮动框标题</h1>
</ion-header-bar>
<ion-content>
Hello!
</ion-content>
</ion-popover-view>
</script>
fromTemplateUrl 方法
angular.module('ionicApp', ['ionic'])
.controller( 'AppCtrl',['$scope','$ionicPopover','$timeout',function($scope,$ionicPopover,$timeout){
$scope.popover = $ionicPopover.fromTemplateUrl('my-popover.html', {
scope: $scope
});
// .fromTemplateUrl() 方法
$ionicPopover.fromTemplateUrl('my-popover.html', {
scope: $scope
}).then(function(popover) {
$scope.popover = popover;
});
$scope.openPopover = function($event) {
$scope.popover.show($event);
};
$scope.closePopover = function() {
$scope.popover.hide();
};
// 清除浮动框
$scope.$on('$destroy', function() {
$scope.popover.remove();
});
// 在隐藏浮动框后执行
$scope.$on('popover.hidden', function() {
// 执行代码
});
// 移除浮动框后执行
$scope.$on('popover.removed', function() {
// 执行代码
});
}])
尝试一下 ?
我们也可以把模板当作一个字符串，使用 .fromTemplate() 方法来实现弹框:
fromTemplate 方法
angular.module('ionicApp', ['ionic'])
.controller( 'AppCtrl',['$scope','$ionicPopover','$timeout',function($scope,$ionicPopover,$timeout){
$scope.popover = $ionicPopover.fromTemplateUrl('my-popover.html', {
scope: $scope
});
// .fromTemplate() 方法
var template = '<ion-popover-view><ion-header-bar> <h1 class="title">我的浮动框标题</h1> </ion-header-bar> <ion-content> Hello! </ion-content></ion-popover-view>';
$scope.popover = $ionicPopover.fromTemplate(template, {
scope: $scope
});
$scope.openPopover = function($event) {
$scope.popover.show($event);
};
$scope.closePopover = function() {
$scope.popover.hide();
};
// 清除浮动框
$scope.$on('$destroy', function() {
$scope.popover.remove();
});
// 在隐藏浮动框后执行
$scope.$on('popover.hidden', function() {
// 执行代码
});
// 移除浮动框后执行
$scope.$on('popover.removed', function() {
// 执行代码
});
}])
尝试一下 ?
王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat