Popover
$ionicPopover, 参看接着讲解的 ionicPopover 控制器。这个控件和上篇中讲到的ionicModal 内容基本一致。
popover是浮动在用户app内容之上的view视图，很方便的用来展示或收集用户信息，主要用于：
展示当前view视图的更多信息
选择一个常用的工具或配置
展现一个app视图中的动作列表
把要显示在popover中的内容放在元素中即可。
用法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<p>
<button ng-click="openPopover($event)">Open Popover</button>
</p>
<script id="my-popover.html" type="text/ng-template">
<ion-popover-view>
<ion-header-bar>
<h1 class="title">My Popover Title</h1>
</ion-header-bar>
<ion-content>
Hello!
</ion-content>
</ion-popover-view>
</script>
angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicPopover) {
$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();
};
|
API 方法：
1
2
3
4
5
6
7
|
fromTemplate(templateString, options), 返回ionicPopover的控制器实例
----templateString, 类型string，modal中显示的内容。
----options，类型object，传递给 $ionicPopover 初始化方法的参数
-------------------------------------------
fromTemplateUrl(templateUrl, options)，返回 ionicPopover 的控制器实例中用到的promise对象
----templateString, 类型string，modal中显示的内容url。
----options，类型object，传递给 $ionicPopover 初始化方法的参数
|
ionicPopover
由$ionicPopover 服务调用，当你不需要popover 的时候，要及时调用remove()方法以避免发生内存泄漏。
注意：popover 会从它自身的scope中广播’popover.shown’, ‘popover.hidden’, 和’popover.removed’事件，把这个作为传递事件参数的一部分。移除popover时会调用popover.removed 和 popover.hidden 这两个事件。
方法：
1
2
3
4
5
6
7
8
9
10
11
12
|
initialize(options), 创建一个新的modal控制器实例
----options，类型object，可选值：
-------------{object=} 父scope，默认在$rootScope下创建独立的scope
-------------{string=} 显示或隐藏的动画效果. 默认是'slide-in-up'
-------------{boolean=} 是否让popover的第一个输入获得焦点，默认是false.
-------------{boolean=} 点击背景的是否自动关闭popover，默认是 true
-------------{boolean=} 是否可以使用手机的硬件返回按钮关闭popover，默认: true.
show($event)，显示popover，返回popover 显示后的promise对象
------$event，这个popover对齐的event或target元素
hide(), 隐藏popover，返回popover 隐藏后的promise对象
remove()，从dom中移除popover 实例，并clean，返回popover 移除后的promise对象
isShown(), 返回boolean，表示当前popover 是否显示
|
ionic popup服务允许通过程序创建一个popup弹出的窗口，需要用户交互才可以继续。
popup支持原生的 alert(),prompt(),confirm() 这些弹出窗口，也支持可定制内容和样式的弹出框。
popup中的input可以增加autofocus属性，这样当弹出对话框时，会自动是这个input获得焦点。
用法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
angular.module('mySuperApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {
|
API 方法：
show(options), 显示一个复杂的popup弹出框。
复杂的弹出框，可以设置一个buttons数组，里面每个button可以设置text属性，type属性和onTap事件，而系统默认在点击按钮时，会关闭对话框并返回结果到promise对象中，如果你不想关闭对话框，可以在onTap事件函数中调用event.preventDefault()。返回一个promise对象，该对象有个close方法，可以在程序中调用这个方法来关闭弹出框。
—-options， 类型是object，参考示例如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
{
title: '',
|
alert(options)，警告弹出框，显示一段信息，和一个按钮，点击按钮可以关闭弹出框。返回一个promise对象，该对象有个close方法，可以在程序中调用这个方法来关闭弹出框。
——options，类型object，配置弹出框的参数。
1
2
3
4
5
6
7
8
|
{
title: '', // String. The title of the popup.
subTitle: '', // String (optional). The sub-title of the popup.
template: '', // String (optional). The html template to place in the popup body.
templateUrl: '', // String (optional). The URL of an html template to place in the popup body.
okText: '', // String (default: 'OK'). The text of the OK button.
okType: '', // String (default: 'button-positive'). The type of the OK button.
}
|
confirm(options)，弹出一个comfirm对话框，点击ok按钮返回true，点击cancel返回false的promise对象。返回一个promise对象，该对象有个close方法，可以在程序中调用这个方法来关闭弹出框。
——options，类型object，显示confirm对话框的参数。例子：
prompt(options),显示一个带有输入框，ok按钮，cancel按钮的对话框。点击ok时，返回的promise对象中包含输入的值，点击cancel时，值为undefined。返回的promise对象有个close方法，可以在程序中调用这个方法来关闭弹出框。使用例子：
1
2
3
4
5
6
7
8
|
$ionicPopup.prompt({
title: 'Password Check',
template: 'Enter your secret password',
inputType: 'password',
inputPlaceholder: 'Your password'
}).then(function(res) {
console.log('Your password is', res);
});
|
—— options, 类型object，配置对话框参数。示例：
1
2
3
4
5
6
7
8
9
10
11
12
|
{
title: '',
|
ion-scroll 创建一个可以容纳所有内容，滚动的容器。
用法：
1
2
3
|
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
<div style="width: 5000px; height: 5000px; background: url('https://upload.wikimedia.org/wikipedia/commons/a/ad/Europe_geological_map-en.jpg') repeat"></div>
</ion-scroll>
|
注意：设置scroll box的高度和内部内容的高度很重要，这样才可以让滚动区域随意滚动显示。
API 参数：
1
2
3
4
5
6
7
8
9
10
11
12
13
|
delegate-handle(optional), string,控制这个scroll view的委托实例$ionicScrollDelegate
direction(optional),string,滚动的方向. 'x' or 'y' or 'xy'. 默认是 'y'.
属性：locking（可选）,类型boolean，是否锁定一次只能滚动一个方向
属性:padding（可选），类型boolean，是否给content增加padding，iOS默认为true，android默认为false
属性：scroll（可选），类型boolean，是否允许滚动内容，默认是true
属性：on-scroll，类型：expression，滚动内容时执行的表达式
属性：on-refresh，类型：expression，下拉刷新时调用，由ionRefresher 触发。
属性：scrollbar-x，类型boolean，是否显示x轴滚动条
属性：scrollbar-y，类型boolean，是否显示y轴滚动条
属性：zooming，类型boolean，是否支持手势缩放
属性：min-zoom，类型integer，最小缩放比例，默认是0.5
属性：max-zoom，类型integer，最大缩放比例，默认是3
属性：has-bouncing，类型：boolean，是否允许滚动时弹跳超过内容体的边界，ios默认true，Android默认false
|
ionContent 和 ionScroll 中共有的子元素。
ionInfiniteScroll 允许你在用户滚动到内部内容的边缘时调用一个回调函数。
当用户滚动内容距离底部小于distance定义的距离时，会自动调用on-infinite中定义的回调函数，可以加载更多内容，加载完更多内容后，在控制器中需要广播croll.infiniteScrollComplete 事件。使用实例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<ion-content ng-controller="MyController">
<ion-list>
....
....
</ion-list>
<ion-infinite-scroll
on-infinite="loadMore()"
distance="1%">
</ion-infinite-scroll>
</ion-content>
function MyController($scope, $http) {
$scope.items = [];
$scope.loadMore = function() {
$http.get('/more-items').success(function(items) {
useItems(items);
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
$scope.$on('$stateChangeSuccess', function() {
$scope.loadMore();
});
}
|
当没有更多内容加载时，停止infinite scroll的方法是使用ng-if指令
1
2
3
4
5
|
<ion-infinite-scroll
ng-if="moreDataCanBeLoaded()"
icon="ion-loading-c"
on-infinite="loadMoreData()">
</ion-infinite-scroll>
|
API 参数：
1
2
3
4
5
|
on-infinite, 类型expression，当滚动到底部时候的调用函数
distance（可选），类型string，定义距离底部多少时调用on-infinite定义的表达式，默认是：1%
icon（可选），类型string，定义加载过程中显示的图标，默认是‘ion-loading-d'
$ionicScrollDelegate
|
