Clever Geek Handbook

Ons-navigator Multiple Navigators in one page template

I am trying to create an application from the Onsen UI framework. I use multiple navigators. Here on the first page (Template) it works great. With other pages this gives a definite error.

Here is the error I get when I click on the Google Chrome console Error: You can not supply no "ons-page" element to "ons-navigator".

This is what my page templates look 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>

Can't use more than one navigator on one page?

I'm trying to solve the same problem with the following method, but it helped, but it removed the ons-back button from the nav 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'll just bring the tag in <ons-page>

and it's working awesome, but <ons-back-button>Back</ons-back-button>

it doesn't seem to work after that.

Any other way to do this.

+2


source to share


2 answers


Are you using multiple navigators for any specific reason? I think that one navigator is enough for what you want to do. Place one nav in the parent ("directory.html" in this code) and remove it from the rest. Pages you call from "directory.html" will also have access to this navigator, so there is no need to create new ones. Also, ons-navigator

it should always have ons-page

inside, so don't delete it or you will see Error: You can not supply no "ons-page" element to "ons-navigator"

. You can think of it ons-navigator

as a "frame" whose content ons-page

changes depending on what you click / pop. You don't need a frame within a frame, do you?



Hope it helps!

+2


source


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

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



There may be conflict in variables.

0


source






More articles:


All Articles