【monaca】pushPageで遷移後、ons-gesture-detectorで取得できるイベントの挙動について
表題の件につきましてOnsenUI最小テンプレを例に記述いたします。
まずindex.htmlを以下のように設定し、
<ons-navigator var="myNavigator" page="page1.html" ng-controller="navControlle">
</ons-navigator>
page2.htmlを以下のように設定しています。
<ons-page ng-controller="page2Controlle">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Page 2</div>
</ons-toolbar>
<div style="text-align: center">
<h1>Page 2</h1>
<ons-button
onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
<ons-list>
<ons-gesture-detector>
<ons-list-item class="hold" modifier="tappable">
<p>リスト1</p>
</ons-list-item>
<ons-list-item class="hold2" modifier="tappable">
<p>リスト2</p>
</ons-list-item>
</ons-gesture-detector>
</ons-list>
コントローラーを以下のように設定しています。
<script>
app = ons.bootstrap();
app.controller('navControlle', function($scope) {
$(document).on('hold', '.hold', function(){
console.log("hoge");
});
});
app.controller('page2Controlle', function($scope) {
$(document).on('hold', '.hold2', function(){
console.log("fuga");
});
});
</script>
page2.htmlに初めて遷移したときの「リスト1」「リスト2」を長押しした際の挙動は同じで、それぞれconsole.logが1回よばれるのですが、
page2からpage1に戻って、再度page2に遷移したときに「リスト2」を長押しすると、holdが2回連続で呼ばれます。この時「リスト1」は1回しか呼ばれません。
再度page1にもどってpage2に、と繰り返して「リスト2」をクリックすると、今度はholdが3呼ばれ、どんどん呼ばれる回数が追加される挙動となります。
実際にはholdイベントにてpopupを表示する仕組みにしているのですが、連続的にイベントが発生してしまうため、呼び出される回数分popupが瞬間的に表示されてしまい困っております。
最悪navControlle内で処理すれば良いと思っていますが、できればページ毎にcontrollerを設定したいと考えております。
この事象の原因及び回避策についてご存知の方はいらっしゃいますでしょうか?