Onsen - navigator and sliding menu - function on prepush doesn't working

问题

I have a big problem. I want to use navigator and sliding menu. Then I need to have some behaviour on postpush.

This is my codepen example:

http://codepen.io/anon/pen/zxgpVo

If you stay in Home and navigate from this point, then you see the console.log . But if you change from the sliding menu and go to Products, then the console.log doesn't working and if you return in Home doesn't working here anymore.

I create 2 navigator with the same name. This is a right thing? Maybe this can be the problem?

<ons-template id="home.html">
  <ons-navigator page="page0.html" var="myNav"></ons-navigator>
</ons-template>

<ons-template id="products.html">
  <ons-navigator page="page_products.html" var="myNav"></ons-navigator>
</ons-template>

I cannot figure out how can I create a working example.

I hope someone can help me.

Thanks!

回答1:

I will try to explain what is happening there (or, at least, what I understand):

The root of your project is an ons-sliding-menu and then you have two childs, one per menu entry (home and products). Each child is an ons-navigator with the same name, but it should not matter since they will not be "alive" at the same time. When you are in home and use menu.setMainPage('products.html') you are killing home's navigator and creating product's navigator. Your events only work in the very beginning because you associate them to home's navigator on ons.ready() only the first time. Therefore, when you use setMainPage you are destroying the navigator that has those events, and the new navigators won't have them.

Instead of associating the events to the navigator on ons.ready, you can specify the postpush/prepush events in the creation of the navigator itself. There are attributes to do that explained in the docs: http://onsen.io/reference/ons-navigator.html#attributes

Hope it helps!

来源：https://stackoverflow.com/questions/29669907/onsen-navigator-and-sliding-menu-function-on-prepush-doesnt-working