Onsen ui navigation with parameters

Question

I am using onsen ui with typescript and angularJS with an ons-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, an it is fine.... When I navigated to link/to/some/page.html, I need to push some parameters to link/to/some/other/page.html using that code:

 $scope.myNavigator.pushPage("link/to/some/other/page.html", {param1: "bla", param2: "blabla"});

I read the parameters using this code:

var page = $scope.myNavigator.getCurrentPage();
console.log(page.options.param1); // Should return "bla"

This gives me an error, because param1 is not defined. I am not sure why this happens, because it is the code from the onsenUI-page. I think this is because I already defined the page link/to/some/other/page.html in my ons-sliding-menu ....

Every 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 You!

Answer 1

You say every page looks like the one you pasted. Do you have several <ons-navigator> tags? You should 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 pen:

http://codepen.io/argelius/pen/OPJRPe

Do you have the navigator attached to some scope that is parent of the scope of the controller for the page you push?

In your parent controller you could do:

ons.ready(function() {
  $scope.navigator = $window.myNavigator
});

And then use that object in the child controllers.

Answer 2

I facing same problem, my solution for this is basicaly combine both in 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>

In this way you can use both SlideMenu and Navigator pattern