Hello, I am new to the Onsen UI Framework and I must say it is a very nice and beautiful framework. However, I am facing an issue with navigation. When transitioning from the main page to another template, where I input some data and save it, I encounter an error when trying to go back to the main page using myNavigator.popPage(). The error message states "NavigatorView's page stack is empty". Below is the code snippet I am currently using with a sliding menu:
Index.html
<ons-navigator title="Navigator" var="myNavigator">
<ons-sliding-menu close-on-tap
main-page="main.html"
menu-page="menu.html"
side="left"
max-slide-distance="250px"
var="menu">
</ons-sliding-menu>
</ons-navigator>
<ons-template id="menu.html">
<ons-list>
<ons-list-item modifier="chevron" onclick="menu.setMainPage('nomor.html', {closeMenu: true})">
Setting Nomor
</ons-list-item>
</ons-list>
</ons-template>
<ons-template id="nomor.html">
<ons-page ng-controller="penomoranController">
<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"> Setting Nomor</div>
<div class="right">
<div id="prosesAjax"></div>
</div>
</ons-toolbar>
<ons-list>
<ons-list-item>
<input type="text" placeholder="nomor" ng-model="noini" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
</ons-list>
<div class="content-padded">
<ons-button id="btnSignIn" modifier="large" ng-click="saveData()">
Save
</ons-button>
</div>
</ons-page>
</ons-template>
AngularJS Controller
agendaApp.controller('penomoranController',function ($scope){
$scope.saveData=function(){
$scope.myNavigator.popPage();
};
});
Whenever I click the Save Button, I receive the error message 'NavigatorView's page stack is empty'. Can someone please help me identify what is causing this issue? Thank you for your assistance.