Question

我刚刚开始使用Monaca和Onsen UI，我的页面设置了滑动菜单和导航器。我有一个ons-back-button，根据定义，除非页面堆栈大小至少为2，否则不应显示。当我调用resetToPage时，导航按预期工作，但后退按钮虽然不应该显示。

当我调用任何javascript函数时，该按钮消失，因此页面可能无法在resetToPage调用上正确刷新。在导航器上调用console.log会返回页面：Array [1]，但调用它也会删除后退按钮，这可能不是真正发生的事情。

第1页

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

第2页

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

Answer 1

我找到了解决方案。在转换结束时致电$rootScope.$digest()。

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>

更新

此错误已在1.3.13版本中修复 https://github.com/OnsenUI/OnsenUI/releases/tag/1.3.13

调用resetToPage后显示Onsen UI ons-back-button

1 个答案:

更新