Onsen ui navigation with parameters
I am using onsen ui with typescript and angularJS with sliding menu:
<ons-sliding-menu menu-page="menu.html" main-page="link/to/some/page.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page modifier="menu-page">
<ons-toolbar modifier="transparent"></ons-toolbar>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('link/to/some/page.html', {closeMenu: true})">
Home
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('link/to/some/other/page.html', {closeMenu: true})">
Home
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
This gives me my menu, it's fine ... When I went to link / in / some / page.html I need to push some options for link / to / some / other / page.html using this code:
$scope.myNavigator.pushPage("link/to/some/other/page.html", {param1: "bla", param2: "blabla"});
I read the parameters with this code:
var page = $scope.myNavigator.getCurrentPage();
console.log(page.options.param1); // Should return "bla"
This is giving me an error because param1 is not defined. I'm not sure why this is happening because this is the code from the onsenUI page. I think it has to do with the fact that I have already defined a link to page / in / some / other / page.html in my ons-slide-menu ....
Each page looks like this:
<ons-navigator title="Navigator" var="myNavigator">
<div ng-controller="ControllerOfPage">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">{{title}}</div>
</ons-toolbar>
PAGE CONTENT
</ons-page>
</div>
</ons-navigator>
Any suggestions? Thank!
source to share
You say that every page is like the one you inserted. Do you have multiple tags <ons-navigator>
? You really only need one.
If you do
$scope.navigator.pushPage('somepage.html', {param1: 'bla'});
You should be able to do
console.log($scope.navigator.getCurrentPage().options.param1);
See the handle:
http://codepen.io/argelius/pen/OPJRPe
Do you have a navbar attached to some area that is the parent of the controller for the page you are clicking on?
In your parent controller, you can:
ons.ready(function() {
$scope.navigator = $window.myNavigator
});
And then use that object in child controllers.
source to share
I am facing the same problem, my solution for this foundational combines something like this
<ons-sliding-menu
menu-page="menu.html"
side="left"
max-slide-distance="250px"
var="menu">
<div class="main">
<ons-navigator title="Navigator" var="myNavigator" page="home.html"></ons-navigator>
</div>
</ons-sliding-menu>
So you can use SlideMenu and Navigator template
source to share