<ons-button modifier="quiet" ng-click="Navigator.pushPage('hoge.html', { animation : 'lift' } )">hoge</ons-button>
というボタンを設置して、
そのボタンを複数回押すと、押した数だけ画面が出てきてしまいます。
それを防ぐような処理はどうしたら良いでしょうか?
教えていただけると幸いです。よろしくお願いいたします。
ボタン押下後は画面遷移処理を無効にしておき、遷移終了したタイミングで再び遷移処理実行可能にすればよいです。navigation.pushPage()
の options
では、onTransitionEnd
にコールバック関数が指定できます。
以下のようになります。
root page:
<!DOCTYPE HTML>
<html>
<head>
...
<script>
...
app.controller('MainCtrl', function($scope) {
$scope.isPushing = false;
$scope.pushTo = function( pageName) {
if ($scope.isPushing) return;
$scope.isPushing = true;
$scope.myNavigator.pushPage(pageName, {
animation : 'lift',
onTransitionEnd: function() {
$scope.isPushing = false;
}
});
};
});
</script>
</head>
<body ng-controller="MainCtrl">
...
ons page:
<ons-button modifier="quiet" ng-click="pushTo('page2.html')">
hoge
</ons-button>
<button>
要素に付ける記述は、ng-click="pushTo('XXXX.html')
だけです。画面遷移が同時に起こることはないので、 isPushing
は共通で使えますし、pushTo()
関数は、アプリケーションで一つあれば良く、全ページで使い回せます。関数の宣言は1つで良いです。 /// もし AngularJS の機能を生かしてスマートに作るとすれば、新しいディレクティブを宣言することになるのかと思いますが、基本的な仕組みは「onTransactionEnd
が起こるまでボタンによる動作を無効にする」ということで、同じになる上、タグに付加するコードも大差ないと思いますよ。(まあ、Monaca に慣れていないので、もしかすると、もっといい方法があるのかもしれませんが・・・)
Commented
2015年2月5日 13:54