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

Question

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:

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');
    }
});

Update

one solution is to reload the app by using

window.location.reload(true);

score 4 · Answer 1 · edited Oct 05 '16 at 21:30

4

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)
          return;

      $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:

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

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

edited Oct 05 '16 at 21:30

Mahmoud Farahat

5,364
4
43
59

answered Apr 16 '15 at 02:44

danjarvis

10,040
3
22
21

1

Hey! Something like this has been added to Onsen UI 1.3.3-dev: https://github.com/OnsenUI/OnsenUI/pull/663 Now it is enough with `popPage({'refresh': true});` It will be released soon :) – Fran Dios May 25 '15 at 02:55
Hi @FranDios. I've facing a similar issue. But using 'refresh': true on popPage, doesn't re-load the controller, so I can't do the re-initialization of that page. Is there any other way out? The replacePage() thing causes a glitch in the UI. – Rohit Jain Aug 01 '15 at 05:53
@RohitJain `refresh: true` is only in master branch at the moment. danjarvis' solution is supposed to avoid the flickering so it could help you. – Fran Dios Aug 05 '15 at 06:31

Fran Dios · Accepted Answer · 2015-04-07T03:05:09.167

2

You can use the new pageReplace() that comes with the new Onsen UI 1.3.0. You can pass it to the callback of popPage() like this:

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

Working here: http://codepen.io/frankdiox/pen/gbJGZw

Hope it helps!

edited Apr 07 '15 at 03:05

answered Apr 07 '15 at 02:45

Fran Dios

3,482
2
15
26

I tried this, but the reload function is not recalled on replacePage So I'm reloading the whole application by using window.location.reload(true); – Danish Jamil Apr 08 '15 at 09:14
Check the console in the Codepen I provided. Every time you press the 'popPage' button a new message appears... so the reload function is being called. – Fran Dios Apr 08 '15 at 09:54
However your answer seems to be right. Will try this when I'm done with the design of my app. – Danish Jamil Apr 09 '15 at 05:20
@danjarvis Could just call: $scope.nav.replacePage('page1.html', { animation : 'none' } ); Without pop, according to documentation, navigator.replacePage substitutes the current page. No hiccups – Ahmed Alejo Jun 18 '15 at 02:07
@AdeAlejo It does replace the current page, but then he would have two 'page1.html' in the navigator page-stack. – Fran Dios Jun 18 '15 at 03:52

score 1 · Answer 3 · answered Nov 30 '15 at 20:38

danjarvis,

Thank you for the idea! I was struggling with Onsen coming from Ionic, so your example really helped. I slightly modified it and here is an alternative if anyone was interested. It wasn't destroying ons-pages for me, which I needed it to for handling some odd duplicate directive issues. Also, I had to go back more than one page sometimes.

//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++;
};

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

3 Answers3

Linked