Popover
$ionicPopover, 參看接着講解的 ionicPopover 控制器。這個控件和上篇中講到的ionicModal 內容基本一致。
popover是浮動在用戶app內容之上的view視圖，很方便的用來展現或收集用戶信息，主要用於：html
展現當前view視圖的更多信息
選擇一個經常使用的工具或配置
展示一個app視圖中的動做列表
把要顯示在popover中的內容放在元素中便可。
用法：android
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 方法：ios
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 這兩個事件。express
方法：數組
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得到焦點。
用法：promise
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 方法：ruby
show(options), 顯示一個複雜的popup彈出框。
複雜的彈出框，能夠設置一個buttons數組，裏面每一個button能夠設置text屬性，type屬性和onTap事件，而系統默認在點擊按鈕時，會關閉對話框並返回結果到promise對象中，若是你不想關閉對話框，能夠在onTap事件函數中調用event.preventDefault()。返回一個promise對象，該對象有個close方法，能夠在程序中調用這個方法來關閉彈出框。
—-options， 類型是object，參考示例以下：app
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，配置彈出框的參數。less
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對話框的參數。例子：dom
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 |
