Onsen UI page navigation with parameters not working

Question

I'm using Onsen UI and AngularJS, and trying to pass a value on Onsen navigation , but it is not working. What can be wrong?

page1.html

<ons-button modifier="clean" ng-click="menu.setMainPage('page2.html', {closeMenu: true}, {color:'red'})"><img src="red.jpg"></ons-button>

<ons-button modifier="clean" ng-click="menu.setMainPage('page2.html', {closeMenu: true}, {color:'blue'})"><img src="blue.jpg"></ons-button>

page2.html

        <p>the color is: {{ color }}!</p>

app.js

app.controller('colorController', function($scope, colorData) {
    var page = $scope.ons.navigator.getCurrentPage();
    $scope.color = page.options.color;
});  

When I run it, the page2 at <p>***{{ color }}***</p> does not display the color based on clicked button (red or blue). It displays only the color is: !

Any help will be appreciated. Thank you in advance!!!

Answer 1

You cannot pass options with a Sliding Menu and read them with a Navigator. There is no menu.getCurrentPage() in Sliding Menu so you have to use a Navigator for that. It's possible to emulate it using navigator.resetToPage() method instead of menu.setMainPage(). First, you need a Navigator as a child of your Sliding Menu:

<ons-sliding-menu
  menu-page="menu.html" main-page="navigator.html" var="menu" ...>
</ons-sliding-menu>

<ons-template id="navigator.html">
  <ons-page>
    <ons-navigator var="navi" page="main.html"></ons-navigator>
  </ons-page>
</ons-template>

Then, in the menu:

<ons-template id="menu.html">
  <ons-page>
    <ons-list>
      <ons-list-item onclick="navi.resetToPage('main.html'); menu.close()">Main</ons-list-item>
      <ons-list-item onclick="navi.resetToPage('page.html', {param1: 'hoge', param2: 'fuga'}); menu.close()">Page with params</ons-list-item>
    </ons-list>
  </ons-page>
</ons-template>

Now you can access to the parameters with navi.getCurrentPage().options. Working in this codepen: http://codepen.io/frankdiox/pen/OyvvGZ