javascript - AngularJS OnsenUI 在子页面的 nav.popPage() 上重新加载父页面

Question

我在 ng-init 上调用一个函数，在该页面中，我在单击按钮时将一个新页面推送到导航器的 pageStack。在子页面中，我正在弹出当前页面。现在我想在子页面从页面堆栈中移除时重新加载父页面。

代码如下:

HTML

<ons-navigator var="nav" page="page1.html">

</ons-navigator>

<ons-template id="page1.html">
    <ons-page ng-controller="pageOneController" ng-init="reload()">
        <ons-toolbar>
            <div class="center">Page 1</div>
        </ons-toolbar>
        <ons-button ng-click="nav.pushPage('page2.html')">Push Page</ons-button>
    </ons-page>
</ons-template>

<ons-template id="page2.html">
    <ons-page>
        <ons-toolbar>
            <div class="center">Page 2</div>
        </ons-toolbar>
        <ons-button ng-click="nav.popPage();">Pop Page</ons-button>
    </ons-page>
</ons-template>

AngularJS

module.controller('pageOneController', function(){
    $scope.reload = function(){
        console.log('Page one controller reloaded');
    }
});

更新

一种解决方案是通过使用重新加载应用

window.location.reload(true);

Answer 1

虽然 Fran 的回答很好，但当页面被替换时，UI 中会出现小的闪烁/打嗝。我通过使用 insertPage() 并更改操作的顺序采取了稍微不同的方法。最终结果是更流畅的 UI 流程:

$scope.replacePreviousPage = function(url) {
      var pages = $scope.nav.getPages(),
          index = pages.length - 2;

      if (index < 0)
          return;

      $scope.nav.insertPage(index, url);
      pages.splice(index, 1);
};

你可以创建另一个函数来封装替换和弹出，或者像这样调用它们:

$scope.replacePreviousPage('views/page1.html');
$scope.nav.popPage();

我正在考虑将其作为一个选项(即 option.reloadPage)修补到 popPage() 中并提交一个拉取请求。