

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

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

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


CC BY-SA 3.0
2015-09-05T05:40:14.790
16280
2015-09-05T06:58:34.437
11129
question
monaca onsen-ui
OnsenUI Navigatorのpushpage内をリロードさせたい


`animation: 'none'`を指定して`replacePage()`でどうでしょうか。  
  

**修正**  
第2階層以下で`animation:
none;`の`replacePage()`を呼んだ場合、popPage時のアニメーションまで消えてしまうので、リロード後にanimationをリセットする必要があります。  
  
`<ons-back-button>`を使わない場合は、リセットしなくても下記のように`animation:
'default'`を指定して`popPage()`でOKです。

[code]

    $scope.nav.popPage({animation: 'default'});
    
[/code]

[code]

    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});
      };
    });
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2015-09-05T06:14:15.690
16282
2015-09-05T06:58:34.437
2015-09-05T06:58:34.437
8532
8532
16280
answer