javascript - "Page Not Found" Error When Adding a Second <ons-template> tag -
i'm brand new onsen ui , i'm busy working <ons-navigator>
:
<body ng-controller="appcontroller"> <!-- cordova reference --> <script src="cordova.js"></script> <script src="scripts/index.js"></script> <!-- --> <ons-navigator title="navigator" var="mynavigator"> <!-- login screen --> <ons-page> <div class="login-form" ng-controller="logincontroller"> <input type="text" class="text-input--underbar" placeholder="membership number" value="" ng-model="membershipno"> <input type="password" class="text-input--underbar" placeholder="password" value="" ng-model="password"> <br><br> <ons-button modifier="large" class="login-button">log in</ons-button> <br><br> <ons-button modifier="quiet" class="register-link" onclick="mynavigator.pushpage('register', { animation : 'lift' } )">register</ons-button> </div> </ons-page> <!-- login screen --> <!-- register screen --> <ons-template id="register"> <ons-page> <div class="register-form" ng-controller="registercontroller"> <input type="text" class="text-input--underbar" placeholder="membership number" value="" ng-model="membershipno"> <br><br> <ons-button modifier="large" class="register-button" onclick="mynavigator.pushpage('thanks', { animation : 'fade' } )">register</ons-button> </div> </ons-page> </ons-template> <!-- register screen --> <!-- screen --> <ons-template id="thanks"> <ons-page> <div class="thanks-notification" ng-controller="registercontroller"> <h1>thanks!</h1> <h3>your login credentials sent via sms.</h3> <br><br> <ons-button modifier="large" class="ok-button">ok</ons-button> </div> </ons-page> </ons-template> <!-- screen --> </ons-navigator> </body>
navigating login screen register screen works perfectly, navigating register screen screen brings following error:
error: page not found: @ class.<anonymous> (onsenui.js:9703) @ processqueue (angular.js:14567) @ angular.js:14583 @ scope.$get.scope.$eval (angular.js:15846) @ scope.$get.scope.$digest (angular.js:15657) @ scope.$get.scope.$apply (angular.js:15951) @ done (angular.js:10364) @ completerequest (angular.js:10536) @ xmlhttprequest.requestloaded (angular.js:10477)
i've been playing around , seems happens when add second ons-template navigator. ideas?
you should not put ons-template
inside navigator. navigator should contain 1 ons-page
, else should outside it.
here can find working codepen example of code (i removed controllers).
example of structure:
<ons-navigator var="mynav"> <ons-page> .... </ons-page> </ons-navigator> <ons-template id="page1.html"> <ons-page> .... </ons-page> </ons-template> <ons-template id="page2.html"> <ons-page> .... </ons-page> </ons-template>
alternative structure, using page
attribute (which defines page show when navigator initialized):
<ons-navigator var="mynav" page="main.html"> </ons-navigator> <ons-template id="main.html"> <ons-page> .... </ons-page> </ons-template> <ons-template id="page1.html"> <ons-page> .... </ons-page> </ons-template>
also, note ons-template
can used in index.html
.
Comments
Post a Comment