2
<ons-button modifier="quiet" ng-click="Navigator.pushPage('hoge.html', { animation : 'lift' } )">hoge</ons-button>

というボタンを設置して、
そのボタンを複数回押すと、押した数だけ画面が出てきてしまいます。

それを防ぐような処理はどうしたら良いでしょうか?

教えていただけると幸いです。よろしくお願いいたします。

1 件の回答 1

2

ボタン押下後は画面遷移処理を無効にしておき、遷移終了したタイミングで再び遷移処理実行可能にすればよいです。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>
2
  • 早速ご回答ありがとうございます!! こちらは、すべてのviewに設置したボタンに同様の記述をするとなると、なかなか煩雑になってしまうのが気になるのですが、それは仕方ないものでしょうか? Commented 2015年2月5日 11:57
  • <button>要素に付ける記述は、ng-click="pushTo('XXXX.html') だけです。画面遷移が同時に起こることはないので、 isPushing は共通で使えますし、pushTo() 関数は、アプリケーションで一つあれば良く、全ページで使い回せます。関数の宣言は1つで良いです。 /// もし AngularJS の機能を生かしてスマートに作るとすれば、新しいディレクティブを宣言することになるのかと思いますが、基本的な仕組みは「onTransactionEnd が起こるまでボタンによる動作を無効にする」ということで、同じになる上、タグに付加するコードも大差ないと思いますよ。(まあ、Monaca に慣れていないので、もしかすると、もっといい方法があるのかもしれませんが・・・) Commented 2015年2月5日 13:54

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。