Logo Questions Linux Laravel Mysql Ubuntu Git Menu

AngularJS OnsenUI reload parent page on nav.popPage() in child page

I'm calling a function on ng-init and in that page I'm pushing a new page to the pageStack of navigator on a button click. And in the child page I'm popping the current page. Now I want to reload the parent page when the child page is removed from page stack.

Here is the code:


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


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

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


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


one solution is to reload the app by using

like image 751
Danish Jamil Avatar asked Mar 17 '23 19:03

Danish Jamil

1 Answers

While Fran's answer works great, there is a small flicker / hiccup in the UI when the page gets replaced. I took a slightly different approach by using insertPage() and changing the order of ops. The end result is smoother UI flow:

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

      if (index < 0)

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

You can create another function to encapsulate the replacing and popping, or just call them like:


I am thinking of patching this into popPage() as an option (i.e. option.reloadPage) and submitting a pull request.

like image 185
danjarvis Avatar answered Apr 01 '23 18:04