Danish Jamil Danish Jamil - 11 months ago 120
Javascript Question

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


Answer Source

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!