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

Popular posts from this blog

python - pip install -U PySide error -

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -