When I transtion to the person.html page using the 'slide' transition, I get the following error: "Fail to fetch PageView from ons-page element."
I don't get an error when I change the transition from 'slide' to 'fade'.
<ons-navigator title="Navigator" var="myNavigator">
<ons-sliding-menu main-page="index.html" menu-page="menu-timeline.html" max-slide-distance="260px" type="push" var="menu">
</ons-sliding-menu>
<ons-template id="index.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button>
<ons-icon icon="ion-home" fixed-width="false" style="font-size: 26px; vertical-align: -4px"></ons-icon>
People App
</ons-toolbar-button>
</div>
<div class="center">People</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="ion-search" onclick="myNavigator.pushPage('search-global.html', { animation : 'fade' } )"></ons-icon>
</ons-toolbar-button>
<ons-toolbar-button ng-click="menu.toggleMenu()">
<ons-icon icon="ion-more"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<!-- changing 'slide' to 'fade' below removes the error -->
<ons-list class="timeline" modifier="inset">
<ons-list-item class="timeline-li" modifier="tappable" ng-repeat="i in [1,2,3]" ng-click="myNavigator.pushPage('person.html', { animation : 'slide' } )">
<ons-row>
<ons-col width="50px">
<img ng-src="https://placeholdit.imgix.net/~text?txtsize=8&txt=50%C3%9750&w=50&h=50" class="timeline-image">
</ons-col>
<ons-col>
<div class="timline-from">
<span class="timeline-name">My Awesome Friend</span>
</div>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="menu-timeline.html">
<ons-page modifier="menu-page">
<ons-toolbar modifier="transparent">
<div class="right">
<ons-toolbar-button class="menu-closeMenu" ng-click="menu.closeMenu()">
</ons-icon>Close
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.closeMenu()">
<ons-icon icon="fa-plus"></ons-icon>
New Person
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="person.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="myNavigator.popPage();">
<ons-icon icon="ion-arrow-left-a" fixed-width="false" style="font-size: 20px;vertical-align:-3px;margin-right:3px;"></ons-icon>
<ons-icon icon="ion-home" fixed-width="false" style="font-size: 26px; vertical-align: -4px"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Person Name. </div>
<div class="right">
<ons-toolbar-button ng-click="menu.toggleMenu()">
<ons-icon icon="ion-android-more-vertical"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list>
<ons-list-item>
Hello. I am Person Name.
</ons-list-item>
<ons-list-item>
If this page appeared using 'slide' then an error resulted.
</ons-list-item>
<ons-list-item>
If it appeared using 'fade' then it should still function fine.
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="search-global.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="myNavigator.popPage();">
<ons-icon icon="ion-arrow-left-a" fixed-width="false" style="font-size: 20px;vertical-align:-3px;margin-right:3px;"></ons-icon>
<ons-icon icon="ion-home" fixed-width="false" style="font-size: 26px; vertical-align: -4px"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Search People</div>
</ons-toolbar>
<ons-list>
<ons-list-item>
<input type="text" placeholder="Enter search text" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
<ons-list-item style="padding-bottom:8px;padding-top:5px;">
<ons-button modifier="large" onclick="">
Search
</ons-button>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
</ons-navigator>
I prefer to use the slide transition because I think it makes navigation look more linear. Does anyone know how I can fix this error?
Here is the CodePen: http://codepen.io/blarney2000/pen/qZoVzW
Basically it just isn't able to find the initial page. If you just wrap the sliding menu inside a page it will be fine. Demo
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-sliding-menu main-page="index.html" menu-page="menu-timeline.html" max-slide-distance="260px" type="push" var="menu">
</ons-sliding-menu>
</ons-page>
</ons-navigator>
Why it bugs out only for slide is sort of a mystery, but the development of Onsen 1 is already finished, so if it's a bug then it's not very likely to be fixed in version 1. So the solution is just put the page and everything will work. Also if you want you could put the navigator inside the sliding menu if that's what you want. Then you can have ons-sliding-menu > ons-navigator > ons-page.