I am working with a mobile app in Phongap and Cordova.
I have my index.html page with ons-list and in each item I get redirected to another page.
I'm doing this as follows:
<list-item-ons modifier = "chevron" ng-click = "myNavigator.pushPage ('NewPage.html', {animation: 'slide'})">
In the new page I have an ons-toolbar with ons-back-button that dosn't work. I want to do a popPage() to return to Index.html.
Could someone give me some help with this?
This is my code:
Index.html:
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>My App</title>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="styles/app.css"/>
<link rel="stylesheet" href="styles/onsen-css-components.min.css">
<script type="text/javascript" src="cordova.js"></script>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="AppController">
<ons-navigator title="Navigator" var="myNavigator">
<ons-sliding-menu main-page="page1.html"
menu-page="menu.html"
side="left"
max-slide-distance="250px"
var="menu"
type="overlay">
</ons-sliding-menu>
<ons-template id="page1.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="center">MyAppName</div>
</ons-toolbar>
<div style="width:100%;height:70%">
<ons-list>
<ons-list-item modifier="chevron">
<div style="text-align:center">Item 1</div>
</ons-list-item>
<ons-list-item modifier="chevron">
<div style="text-align:center">Item 2</div>
</ons-list-item>
<ons-list-item modifier="chevron">
<div style="text-align:center">Item 3</div>
</ons-list-item>
<ons-list-item modifier="chevron">
<div style="text-align:center">Item 4</div>
</ons-list-item>
<ons-list-item modifier="chevron" ng-click="myNavigator.pushPage('NewPage.html', { animation : 'slide' })">
<div style=" text-align:center">Item 5</div>
</ons-list-item>
</ons-list>
</div>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-list>
<ons-list-item modifier="tappable" onclick="menu.setMainPage('page1.html', {closeMenu: true})">
<ons-icon icon="fa-home" size="20px" style="color: #661f7a"></ons-icon>
Home
</ons-list-item>
<ons-list-item modifier="tappable">
<ons-icon icon="fa-question" size="20px" style="color: #661f7a"></ons-icon>
Help
</ons-list-item>
<ons-list-item modifier="tappable">
<ons-icon icon="fa-info-circle" size="20px" style="color: #661f7a"></ons-icon>
About My App
</ons-list-item>
</ons-list>
</ons-template>
</ons-navigator>
</body>
</html>
NewPage.html (containing the back button that doesn't work):
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">My New Page</div>
</ons-toolbar>
<div>
<div>
<input class="text-input" id="my-input" placeholder="Enter some Text...">
</div>
<div>
<ons-switch var="mySwitch1"></ons-switch>
</div>
<div>
<select id="select1"></select>
</div>
<div>
<ons-switch var="mySwitch2"></ons-switch>
</div>
<div>
<select id="select2"></select>
</div>
</div>
</ons-page>
The declaration of the ons-navigator is wrong, you should put the navigator in your main page. The structure should be something like:
<ons-template id="mainPage.html">
<ons-navigator var="myNav">
<ons-page>
...content...
</ons-page>
</ons-navigator>
</ons-template>You can find a working CodePen example HERE, hope it helps!