ons-navigator Multiple Navigator in one page template

Question

i am trying to create an app from Onsen UI framework. I am using multiple navigator. Here in the first page(Template) it works fine. With another pages it gives certain error.

Here is the error i get when i click on my google chrome console Error: You can not supply no "ons-page" element to "ons-navigator".

Here is how my page templates looks like:

<!-- This one works fine -->
  <ons-template id="directory.html">
    <ons-navigator var="app.navi">
    <ons-page ng-controller="directoryControl">
      <ons-toolbar>
        <div class="center">Directory List</div>
      </ons-toolbar>
      <ons-list>

          <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="PostCategory in PostCategories">
            <ons-row ng-click="setCurrentCategory(PostCategory.slug);  app.navi.pushPage('directory-page.html', { animation : 'slide' } )">
              <ons-col>
                <div class="name">
                  {{PostCategory.title}}
                </div>
              </ons-col>
              <ons-col width="40px"></ons-col>
            </ons-row>
          </ons-list-item>
      </ons-list>
    </ons-page>
    </ons-navigator>
  </ons-template>


<!-- This one Gives the error while is use the same method above template it worked-->

  <ons-template id="directory-page.html">
    <ons-navigator var="app.navi" >
    <ons-page ng-controller="directoryCategoryListing">
      <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">{{CurrentCategory}}</div>
      </ons-toolbar>

      <ons-list>
        <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="PostDetail in PostDetails">
          <ons-row ng-click="setCurrentListing(PostDetail.id); app.navi.pushPage('listing-details.html', { animation : 'slide' } )">
            <ons-col width="95px">
              <img src="{{PostDetail.attachments[0].images.square1.url}}" class="thumbnail" ng-if="PostDetail.attachments[0].url != null">
              <img src="images/location1.png" class="thumbnail" ng-if="PostDetail.attachments[0].url == null">
            </ons-col>
            <ons-col>
              <div class="name">
                {{PostDetail.title}}
              </div>

              <div class="desc">
                {{PostDetail.excerpt | htmlToPlaintext}}
              </div>
            </ons-col>
            <ons-col width="40px"></ons-col>
          </ons-row>
        </ons-list-item>
      </ons-list>
    </ons-page>
   </ons-navigator>
  </ons-template>


<!-- Here is want to reach -->

 <ons-template id="listing-details.html">
    <ons-page ng-controller="ListingDetailsCtrl" modifier="listing-details">
        <ons-toolbar modifier="transparent">
          <div class="right">
            <ons-toolbar-button><ons-icon icon="ion-ios-chatboxes" style="color: white"></ons-icon></ons-toolbar-button>
          </div>
        </ons-toolbar>
    </ons-page>
 </ons-template>

One can not use more then one navigator in the same page?

I try to solve the same issue with following method but it helped but it took off the ons-back-button from the navigated page.

<ons-template id="directory-page.html">
    <ons-page ng-controller="directoryCategoryListing">
      <ons-navigator var="CategoryNavi" >
      <ons-toolbar>
        <div class="left"><ons-back-button>Back</ons-back-button></div>
        <div class="center">{{CurrentCategory}}</div>
      </ons-toolbar>    
      <ons-list>
        <ons-list-item modifier="chevron" class="list-item-container" ng-repeat="PostDetail in PostDetails">
          <ons-row ng-click="setCurrentListing(PostDetail.id); CategoryNavi.pushPage('listing-details.html', { animation : 'slide' } )">
            <ons-col width="95px">
              <img ng-src="{{PostDetail.attachments[0].images.square1.url}}" class="thumbnail" ng-if="PostDetail.attachments[0].url != null">
              <img ng-src="images/location1.png" class="thumbnail" ng-if="PostDetail.attachments[0].url == null">
            </ons-col>
            <ons-col>
              <div class="name">
                {{PostDetail.title}}
              </div>
            </ons-col>
            <ons-col width="40px"></ons-col>
          </ons-row>
        </ons-list-item>
      </ons-list>
     </ons-navigator>
    </ons-page>
  </ons-template>

I just bring the tag inside the <ons-page> and its working awesome but it seems like <ons-back-button>Back</ons-back-button> this is not working after that.

Any other way of doing it.

Answer 1

Are you using multiple navigators for any specific reason? I think one navigator for what you want to do is completely enough. Put one navigator in the parent element ("directory.html" in this code) and remove it from the rest of them. The pages you call from "directory.html" will also have access to that navigator, so there is no need to create new ones. Also, an ons-navigator should always have an ons-page inside, so don't remove it or you will see Error: You can not supply no "ons-page" element to "ons-navigator". You can think in the ons-navigator as a "frame" whose content are ons-pages that change depending on what you push/pop. You don't need a frame inside a frame, do you?

Hope it helps!

Answer 2

Have you tried changing the associated variable name for the second navigator ?

<ons-navigator var="app.navi" >

There might be a conflict in variables.