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);
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With