I want to go back home from page4.html without using the menu, but I get this error
Error: You can not supply no "ons-page" element to "ons-navigator
This is my code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sliding Menu</title> <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsenui.css'> <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/css/onsen-css-components.css'> </head> <body onload="_l='t';"> <ons-sliding-menu menu-page="menu.html" main-page="home.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" onclick="menu.setMainPage('home.html', {closeMenu: true})"> <ons-icon icon="fa-plus"></ons-icon> Home </ons-list-item> </ons-list> </ons-page> </ons-template> <ons-template id="home.html"> <ons-navigator var="myNav"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="menu.toggle()"> <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> </ons-toolbar-button> </div> <div class="center">Home</div> </ons-toolbar> <ons-list> <ons-list-item onclick="myNav.pushPage('page1.html')"> go to page 1 </ons-list-item> <ons-list-item onclick="myNav.pushPage('page2.html')"> go to page 2 </ons-list-item> </ons-list> </ons-page> </ons-navigator> </ons-template> <ons-template id="page1.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="menu.toggle()"> <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> </ons-toolbar-button> </div> <div class="center">Page1</div> </ons-toolbar> <ons-list> <ons-list-item onclick="myNav.pushPage('page3.html')"> Page3 </ons-list-item> </ons-list> </ons-page> </ons-template> <ons-template id="page2.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="menu.toggle()"> <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> </ons-toolbar-button> </div> <div class="center">Page2</div> </ons-toolbar> <ons-list> <ons-list-item onclick="myNav.popPage();"> back to Home </ons-list-item> </ons-list> </ons-page> </ons-template> <ons-template id="page3.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="menu.toggle()"> <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> </ons-toolbar-button> </div> <div class="center">Page3</div> </ons-toolbar> <ons-list> <ons-list-item onclick="myNav.pushPage('page4.html');"> go to page 4 </ons-list-item> </ons-list> </ons-page> </ons-template> <ons-template id="page4.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="menu.toggle()"> <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> </ons-toolbar-button> </div> <div class="center">Page4</div> </ons-toolbar> <ons-list> <ons-list-item onclick="myNav.pushPage('home.html');"> back to Home </ons-list-item> </ons-list> </ons-page> </ons-template> <script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/angular/angular.min.js'></script> <script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.0-beta/build/js/onsenui.min.js'></script> <script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-6c99970ade81e43be51fa877be0f7600.js"></script> <script> ons.bootstrap(); </script> </body> </html>
You can try on codepen http://codepen.io/marcocalta/pen/azeozL Thank you!