いつもお世話になっております。
表題の通り、navigatorにてpushpageに移動後pushpage内をリロードさせる事は可能でしょうか?
こちらはpushpageにて外部DBから情報を抽出するにあたり、ネットワークエラー等が生じた場合にページをリロードさせたい為です。
どなたかご教示いただけると幸いです。
よろしくお願いいたします。
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加するanimation: 'none'
を指定してreplacePage()
でどうでしょうか。
修正
第2階層以下でanimation: none;
のreplacePage()
を呼んだ場合、popPage時のアニメーションまで消えてしまうので、リロード後にanimationをリセットする必要があります。
<ons-back-button>
を使わない場合は、リセットしなくても下記のようにanimation: 'default'
を指定してpopPage()
でOKです。
$scope.nav.popPage({animation: 'default'});
ons.bootstrap()
.controller('IndexController', function($scope){
function resetAnimation(){
var options = $scope.nav.getCurrentPage().options;
options.animation = 'default';
options.animator = $scope.nav._getAnimatorOption(options);
}
$scope.count = 0;
$scope.reload = function(){
$scope.nav.replacePage('page2.html', {animation: 'none', onTransitionEnd: resetAnimation});
};
});
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/onsenui.min.js"></script>
<ons-navigator var="nav" page="page1.html">
</ons-navigator>
<ons-template id="page1.html">
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
</ons-toolbar>
<ons-button ng-click="nav.pushPage('page2.html')">Push</ons-button>
</ons-page>
</ons-template>
<ons-template id="page2.html">
<ons-page ng-controller="IndexController">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
</ons-toolbar>
<p>Count: {{count}}</p>
<ons-button ng-click="count = count+1">Count up</ons-button><br><br>
<ons-button ng-click="reload()">Reload</ons-button>
</ons-page>
</ons-template>
animation
オプションを指定しないと、デフォルトのアニメーションが適用されます。上の例で言うと、Reloadボタンを押すたびに(pushPageの時のように)右からページがスライドインしてくることになります。