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

【问题标题】：AngularJS OnsenUI reload parent page on nav.popPage() in child pageAngularJS OnsenUI 在子页面的 nav.popPage() 上重新加载父页面
【发布时间】：2015-04-06 11:16:35
【问题描述】：

我在 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);

【问题讨论】：

标签： javascript html angularjs onsen-ui

【解决方案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();

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

【讨论】：

嘿！ Onsen UI 1.3.3-dev 中添加了类似的内容：github.com/OnsenUI/OnsenUI/pull/663 现在有了popPage({'refresh': true}); 就足够了，它很快就会发布:)
嗨@FranDios。我面临着类似的问题。但是在 popPage 上使用 'refresh': true 不会重新加载控制器，因此我无法重新初始化该页面。有没有其他的出路？ replacePage() 会导致 UI 出现故障。
@RohitJain refresh: true 目前仅在 master 分支中。 danjarvis 的解决方案应该可以避免闪烁，以便为您提供帮助。

【解决方案2】：

您可以使用new Onsen UI 1.3.0 附带的new pageReplace()。您可以像这样将它传递给popPage() 的回调：

$scope.popAndReplace = function() {
  $scope.nav.popPage({onTransitionEnd : function() {
     $scope.nav.replacePage('page1.html', { animation : 'none' } );
  }})
};

在这里工作：http://codepen.io/frankdiox/pen/gbJGZw

希望对你有帮助！

【讨论】：

我试过了，但是replacePage上没有调用reload函数所以我正在使用window.location.reload(true); 重新加载整个应用程序；
检查我提供的 Codepen 中的控制台。每次按下“popPage”按钮时，都会出现一条新消息……因此正在调用重新加载函数。
但是您的答案似乎是正确的。当我完成我的应用程序设计时会试试这个。
@danjarvis 可以调用： $scope.nav.replacePage('page1.html', { animation : 'none' } );根据文档，如果没有弹出， navigator.replacePage 将替换当前页面。没有打嗝
@AdeAlejo 它确实替换了当前页面，但是他会在导航器页面堆栈中有两个 'page1.html'。

【解决方案3】：

丹贾维斯，

谢谢你的想法！我正在为来自 Ionic 的温泉而苦苦挣扎，所以你的例子真的很有帮助。我稍微修改了它，如果有人感兴趣，这里是一个替代方案。它并没有破坏我的页面，我需要它来处理一些奇怪的重复指令问题。另外，有时我不得不返回不止一页。

//function to go back and reload controller
$rootScope.index = 0;
$rootScope.replacePreviousPage = function (url) {
    var c = 0;
    angular.forEach(nav.getPages(), function (v, i) {
        if (i >= $rootScope.index) {
            nav.getPages()[i].destroy();
            c++;
        }
    });
    nav.insertPage($rootScope.index, url);
    nav.popPage();
};

//back
$rootScope.back = function (page) {
    if (page === "index") {
        location.reload();
    } else {
        if (page === "version") {
            $rootScope.index = $rootScope.index - 2;
        } else {
            $rootScope.index--;
        }
        $rootScope.replacePreviousPage('templates/' + page + '.html');
    }
};

//forward
$rootScope.forward = function (page) {
    nav.pushPage('templates/' + page + '.html');
    $rootScope.index++;
};

【讨论】：