CODEWITHSUNDEEP
javascriptonsen-uimonaca
Petri
Petri

Reputation: 37

Onsen UI ons-back-button displaying after calling resetToPage

I've just started using Monaca and Onsen UI and I have the pages set up with sliding menu and navigator. I have an ons-back-button, which by definition shouldn't be shown unless page-stack size is at least 2. When I call resetToPage, the navigation works as expected, but the back button is shown though it shouldn't.

The button disappears when I call any javascript function, so the page probably doesn't refresh itself properly on the resetToPage call. Calling console.log on the navigator returns with pages: Array[1], but calling it also removes the back button so that might be not what's really going on.

Page 1

<ons-navigator var="myNavi">
  <ons-page>
    <ons-button ng-click="myNavi.resetToPage('nextpage.html')">
      Go
    </ons-button>
  </ons-page>
<ons-navigator>

Page 2

<ons-page>
  <ons-toolbar>
    <ons-back-button>
      Back
    </ons-back-button>
  </ons-toolbar>
</ons-page>

Upvotes: 1

Views: 746

Answers (1)

cither
cither

Reputation: 313

I found a solution. Call $rootScope.$digest() on transition end.

angular.module('app', ['onsen'])
.controller('Page3Controller', function($rootScope, $scope){
  $scope.digest = function(){
    $rootScope.$digest();
  };
});
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.12/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.12/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.12/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.12/build/js/onsenui.min.js"></script>

<body ng-app="app">

  <ons-template id="page1.html">
    <ons-page>
      <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">Page1</div>
      </ons-toolbar>
      <ons-button ng-click="myNavi.pushPage('page2.html')">Push</ons-button>
    </ons-page>
  </ons-template>

  <ons-template id="page2.html">
    <ons-page>
      <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">Page2</div>
      </ons-toolbar>
      <ons-button ng-click="myNavi.pushPage('page3.html')">Push</ons-button>
    </ons-page>
  </ons-template>

  <ons-template id="page3.html">
    <ons-page ng-controller="Page3Controller">
      <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">Page3</div>
      </ons-toolbar>
      <ons-button ng-click="myNavi.resetToPage('page1.html', {onTransitionEnd: digest})">Reset</ons-button>
    </ons-page>
  </ons-template>
  
<ons-navigator var="myNavi" page="page1.html"><ons-navigator>
</body>


update

This bug was fixed in the version 1.3.13.
https://github.com/OnsenUI/OnsenUI/releases/tag/1.3.13

Upvotes: 1

Related Questions