ionic 平臺(tái)
$ionicPlatform
$ionicPlatform 用來(lái)檢測(cè)當(dāng)前的平臺(tái)咨跌，以及諸如在PhoneGap/Cordova中覆蓋Android后退按鈕。
方法
onHardwareBackButton(callback)
有硬件的后退按鈕的平臺(tái)，可以用這種方法綁定到它慢显。
| 參數(shù) | 類(lèi)型 | 詳情 |
|---|---|---|
| callback | function | 當(dāng)該事件發(fā)生時(shí)持际，觸發(fā)回調(diào)函數(shù)。 |
offHardwareBackButton(callback)
移除后退按鈕的監(jiān)聽(tīng)事件殴蹄。
| 參數(shù) | 類(lèi)型 | 詳情 |
|---|---|---|
| callback | function | 最初綁定的監(jiān)視器函數(shù)冤吨。 |
registerBackButtonAction(callback, priority, [actionId])
注冊(cè)硬件后退按鈕動(dòng)作。當(dāng)點(diǎn)擊按鈕時(shí)饶套，只有一個(gè)動(dòng)作會(huì)執(zhí)行漩蟆，因此該方法決定了注冊(cè)的后退按鈕動(dòng)作具有最高的優(yōu)先級(jí)。
例如妓蛮，如果一個(gè)上拉菜單已經(jīng)顯示怠李，后退按鈕應(yīng)該關(guān)閉上拉菜單，而不是返回一個(gè)頁(yè)面視圖或關(guān)閉一個(gè)打開(kāi)的模型蛤克。
| 參數(shù) | 類(lèi)型 | 詳情 |
|---|---|---|
| callback | function | 當(dāng)點(diǎn)擊返回按鈕時(shí)觸發(fā)捺癞，如果該監(jiān)視器具有最高的優(yōu)先級(jí)。 |
| priority | number | 僅最高優(yōu)先級(jí)的會(huì)執(zhí)行构挤。 |
| actionId(可選) | * | 該id指定這個(gè)動(dòng)作髓介。默認(rèn)：一個(gè)隨機(jī)且唯一的id。 |
返回值: 函數(shù)筋现， 一個(gè)被觸發(fā)的函數(shù)唐础，將會(huì)注銷(xiāo) backButtonAction。
ready([callback])
設(shè)備準(zhǔn)備就緒矾飞，則觸發(fā)一個(gè)回調(diào)函數(shù)一膨。
| 參數(shù) | 類(lèi)型 | 詳情 |
|---|---|---|
| callback(可選) | function= | 觸發(fā)的函數(shù)。 |
返回: promise對(duì)象, 對(duì)象被構(gòu)造 成功后得到解析洒沦。
ionic 浮動(dòng)框
$ionicPopover
$ionicPopover 是一個(gè)可以浮在app內(nèi)容上的一個(gè)視圖框豹绪。
實(shí)例
【HTML 代碼】
<p>
<button ng-click="openPopover($event)">打開(kāi)浮動(dòng)框</button>
</p>
<script id="my-popover.html" type="text/ng-template">
<ion-popover-view>
<ion-header-bar>
<h1 class="title">我的浮動(dòng)框標(biāo)題</h1>
</ion-header-bar>
<ion-content> Hello! </ion-content>
</ion-popover-view>
</script>
【JavaScript 代碼】
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();
};
// 清除浮動(dòng)框
$scope.$on('$destroy', function() {
$scope.popover.remove();
});
// 在隱藏浮動(dòng)框后執(zhí)行
$scope.$on('popover.hidden', function() {
// 執(zhí)行代碼
});
// 移除浮動(dòng)框后執(zhí)行
$scope.$on('popover.removed', function() {
// 執(zhí)行代碼
});
}])
ionic 對(duì)話框
$ionicPopup
ionic 對(duì)話框服務(wù)允許程序創(chuàng)建、顯示彈出窗口申眼。
$ionicPopup 提供了3個(gè)方法：alert(), prompt(),以及 confirm() 瞒津。
實(shí)例
【HTML 代碼】
<body class="padding" ng-controller="PopupCtrl">
<button class="button button-dark" ng-click="showPopup()">
彈窗顯示
</button>
<button class="button button-primary" ng-click="showConfirm()">
確認(rèn)對(duì)話框
</button>
<button class="button button-positive" ng-click="showAlert()">
警告框
</button>
<script id="popup-template.html" type="text/ng-template">
<input ng-model="data.wifi" type="text" placeholder="Password">
</script>
</body>
【JavaScript 代碼】
angular.module('mySuperApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {
// Triggered on a button click, or some other target
$scope.showPopup = function() {
$scope.data = {}
// 自定義彈窗
var myPopup = $ionicPopup.show({
template: '<input type="password" ng-model="data.wifi">',
title: 'Enter Wi-Fi Password',
subTitle: 'Please use normal things',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: function(e) {
if (!$scope.data.wifi) {
// 不允許用戶(hù)關(guān)閉蝉衣，除非輸入 wifi 密碼
e.preventDefault();
} else {
return $scope.data.wifi;
}
}
},
]
});
myPopup.then(function(res) {
console.log('Tapped!', res);
});
$timeout(function() {
myPopup.close(); // 3秒后關(guān)閉彈窗
}, 3000);
};
// confirm 對(duì)話框
$scope.showConfirm = function() {
var confirmPopup = $ionicPopup.confirm({
title: 'Consume Ice Cream',
template: 'Are you sure you want to eat this ice cream?'
});
confirmPopup.then(function(res) {
if(res) {
console.log('You are sure');
} else {
console.log('You are not sure');
}
});
};
// alert（警告） 對(duì)話框
$scope.showAlert = function() {
var alertPopup = $ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
});
alertPopup.then(function(res) {
console.log('Thank you for not eating my delicious ice cream cone');
});
};
});
