ionicダブルクリック戻りキー終了機能を実現
7444 ワード
この機能を実現するには4つのステップが必要です.
ステップ1:
説明:携帯電話のハードウェア(戻るボタン)と付き合う必要があるため、ionic自体はこの機能を備えていませんが、ng-cordovaプラグインがあります.このプラグインはphoneGapがionicにハードウェアを操作させるためにionicのために作ったプラグインで、このプラグインをインストールするだけで、私たちのionicアプリケーションは写真を撮ったり、ライブラリを閲覧したりすることができます.戻るボタンなどの機能をリスニングします.
操作:このサイトに従ってhttp://ngcordova.com/docs/install/上に述べたng-cordovaプラグインのインストール
ステップ2:
説明:上記のng-cordovaというプラグインはJava言語のインタフェースの意味に似ています.具体的にどのような機能を実現する必要があるのか、私たちは彼のために実装クラス(そのプラグイン)をインストールしなければなりません.今、ユーザーに「もう一度システムを終了する」というプロンプトボックスを提示します.このプロンプトボックスのプラグインはcordova-toast(またはcordovaToastまたは$cordovaToast)と呼ばれます.
操作:DOSウィンドウで現在のIonicアプリケーションのディレクトリに入り、コマンドを入力:cordova plugin addhttps://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git
手順3:
説明:プラグインのインストールが完了したら、依存関係を追加(注入)してから使用します.
操作:ステップ4のコードに$cordovaToastを追加し、ionic自身の$ionicPlatform,$location,$rootScope,$ionicHistoryを使用します.
ステップ4:コード実装
ステップ1:
説明:携帯電話のハードウェア(戻るボタン)と付き合う必要があるため、ionic自体はこの機能を備えていませんが、ng-cordovaプラグインがあります.このプラグインはphoneGapがionicにハードウェアを操作させるためにionicのために作ったプラグインで、このプラグインをインストールするだけで、私たちのionicアプリケーションは写真を撮ったり、ライブラリを閲覧したりすることができます.戻るボタンなどの機能をリスニングします.
操作:このサイトに従ってhttp://ngcordova.com/docs/install/上に述べたng-cordovaプラグインのインストール
ステップ2:
説明:上記のng-cordovaというプラグインはJava言語のインタフェースの意味に似ています.具体的にどのような機能を実現する必要があるのか、私たちは彼のために実装クラス(そのプラグイン)をインストールしなければなりません.今、ユーザーに「もう一度システムを終了する」というプロンプトボックスを提示します.このプロンプトボックスのプラグインはcordova-toast(またはcordovaToastまたは$cordovaToast)と呼ばれます.
操作:DOSウィンドウで現在のIonicアプリケーションのディレクトリに入り、コマンドを入力:cordova plugin addhttps://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git
手順3:
説明:プラグインのインストールが完了したら、依存関係を追加(注入)してから使用します.
操作:ステップ4のコードに$cordovaToastを追加し、ionic自身の$ionicPlatform,$location,$rootScope,$ionicHistoryを使用します.
ステップ4:コード実装
angular.module('lqApp', ['ionic','ngCordova'])
.run(['$ionicPlatform','$location','$rootScope','$ionicHistory','$cordovaToast',
function ($ionicPlatform,$location,$rootScope,$ionicHistory,$cordovaToast) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
/******************** start********************/
$ionicPlatform.registerBackButtonAction(function (e) {
//
if ($location.path() == '/login' || $location.path() == '/tab/main' ) {
if ($rootScope.backButtonPressedOnceToExit) {
ionic.Platform.exitApp();
} else {
$rootScope.backButtonPressedOnceToExit = true;
$cordovaToast.showShortBottom(' ');
setTimeout(function () {
$rootScope.backButtonPressedOnceToExit = false;
}, 2000);
}
}
else if ($ionicHistory.backView()) {
$ionicHistory.goBack();
} else {
$rootScope.backButtonPressedOnceToExit = true;
$cordovaToast.showShortTop(' ')
.then(function(success) {
// success
alert("'success");
}, function (error) {
// error
alert("error");
});
setTimeout(function () {
$rootScope.backButtonPressedOnceToExit = false;
}, 2000);
}
e.preventDefault();
return false;
}, 101);
/******************** end********************/
}]);