[SOLVED] OnsenUi getCurrentPage() gives empty object

OnsenUi getCurrentPage() gives empty object

I am building a hybrid mobile app with Onsen UI and I have a problem with navigating and transferring data between two pages. My starting page is index.html and it contains a main.html ons-template and an ons-navigation and an ons-page element inside each-other. The structrue of the index.html is:

<body>
  <ons-sliding-menu main-page="main.html" menu-page="menu.html" side="left" type="reveal" var="menu">
  </ons-sliding-menu>

  <ons-template id="main.html">
    <ons-navigator var="navi">
      <ons-page id="main-page" class="main-page" ng-controller="MainPage">
      </ons-page>
    </ons-navigator>
  </ons-template>
</body>

I'd like to get the data sent back from search-city.html through the options of popPage() function, but when I try to get the currentPage object of the navigator it gives me an empty page object without name and options.

In chrome console:

Class {page: "", name: "", element: JQLite[1], pageScope: Object, options: Object…}

It is only empty when it tries to get the main page. Also when I run getPages() in search-city.html controller, the first page is empty and the search-city.html is fine:

Class {page: "search-city.html", name: "search-city.html", element: JQLite[1], pageScope: Object, options: Object…}

I try to send back the data and navigate from search-city.html with a popPage() method:

navi.popPage({ animation: 'lift' , data: 'something'});

And I try to get the data in the controller of my main page with a postpop event handler:

navi.on('postpop', function(event) {
  var page = navi.getCurrentPage();
  console.log('popped');
  console.log(page);
});

The problem is that page is empty as I showed above. Why is my main page empty in the page-stack? It is also empty after initialization, running getCurrentPage()

Am I doing something wrong? Is there a better way to pass objects between pages? I prefer jQuery and I am not familiar with AngularJS.

This is the documentation about the ons-navigation: http://onsen.io/reference/ons-navigator.html#method-popPage

Sorry for the long post.

Solution

I think if you put your main ons-page directly inside the navigator, that page won't have a name (the ID is something different) and won't be possible to read it in currentPage object. You can just name your main page and I think it will work fine:

<ons-sliding-menu main-page="navigator.html" menu-page="menu.html" side="left" type="reveal" var="menu">
</ons-sliding-menu>

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

<ons-template id="main.html">
    <ons-page id="main-page" class="main-page" ng-controller="MainPage">
    </ons-page>
</ons-template>

Hope it helps!