1

いつもお世話になっております。

表題の通り、navigatorにてpushpageに移動後pushpage内をリロードさせる事は可能でしょうか?
こちらはpushpageにて外部DBから情報を抽出するにあたり、ネットワークエラー等が生じた場合にページをリロードさせたい為です。

どなたかご教示いただけると幸いです。
よろしくお願いいたします。

1 件の回答 1

3

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>

3
  • citherさん いつもありがとうございます。 animation: 'none'に設定するのは何か理由があるんでしょうか?
    – タック
    2015年9月5日 6:49
  • animationオプションを指定しないと、デフォルトのアニメーションが適用されます。上の例で言うと、Reloadボタンを押すたびに(pushPageの時のように)右からページがスライドインしてくることになります。
    – cither
    2015年9月5日 6:55
  • なるほど! 納得です。 ご丁寧に修正したコードまでご記載頂きありがとうございます! とてもわかりやすいです^_^
    – タック
    2015年9月5日 9:34

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

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