1

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

当我调用任何 javascript 函数时，该按钮会消失，因此页面可能无法在 resetToPage 调用中正确刷新。在导航器上调用 console.log 会返回 pages: 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>
4

1 回答 1

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

于 2015-11-08T15:23:48.063 回答