3

Hello i am new onsen ui i have promblem with navigation, i have app like this.

  1. start.html : this is first page apppear, in this file i put mynavigator. start button will open page1.html
  2. page1.html : do something will open page2.thml
  3. page2.html : do something will open report.html
  4. report.html : in this file i put OK button, then i should back to start.html

when i used :

$scope.myNavigator.pushPage('form/start.html');
//OR
$scope.myNavigator.resetToPage('form/start.html');

all i get error :

You can not supply no "ons-page" element to "ons-navigator"

how navigation that i can back to start.html?

sembilanlangit
  • 245
  • 1
  • 3
  • 19

1 Answers1

0

Your start.html is not a real ons-page. Just put the content of the navigator in a different file or ons-template and make sure it contains an ons-page and not the whole ons-navigator. Basically use navigator's page attribute instead of writing the content inside it if you want to be able to return to the first page. If you can write it in index.html it would look like this:

<ons-navigator page="start.html">
</ons-navigator>

<ons-template id="start.html">
    <ons-page>
        ...
    </ons-page>
</ons-template>

Note that ons-template can only be included in index.html. You can also write that page in a separate file. Hope it helps!

Fran Dios
  • 3,482
  • 2
  • 15
  • 26
  • thanks Fran Dios i have been found the solution. the solution is back to index.html, not a start.htlm $scope.myNavigator.pushPage('form/index.html') thanks you – sembilanlangit Dec 29 '15 at 09:08
  • Frans Dios after get the solution i have problem again with $anchorScroll, can you help me? i have written the problem in another thread http://stackoverflow.com/questions/34507827/anchorscroll-not-working-on-after-back-to-index-html-page-onsen-ui. thank you – sembilanlangit Dec 29 '15 at 09:25
  • I had an similar problem: Whenever I navigated back to the first page with navigator.resetToPage('') the whole application got loaded into the first page-object (with script-elements from head and so on). My temporary workaround is to use: navi.popPage({animation:'none'});navi.popPage({animation:'none'});navi.popPage(); It works :) But it only works here because the app has just one point where it is necessary to jump back to the very beginning (here I have exatly 3 pages to jump back). Just a workaround but in this app it works for me. Maybe someone nows the real solution, I tested a lot... – Torsten Barthel Apr 22 '16 at 23:03