我试图创建温泉UI框架的应用程序。我使用多个导航仪。在第一页（模板）在这里，它工作正常。与其他网页它给一定的误差。

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.

下面是错误，当我在我的谷歌浏览器控制台上点击错误我得到：你不能提供无附件页元素ONS-导航。

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?

我尝试用下面的方法解决同样的问题，但它帮助，但它从导航页面脱下ONS-后退按钮。

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>

我只是把里面的标签＆LT;附件页＆GT; 及其工作真棒，但它似乎像＆LT; ONS-后退按钮＆GT ;返回＆LT; / ONS-后退按钮方式＆gt; 这是不是以后工作

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.

做的任何其他方式。

推荐答案

您使用多个导航任何具体的原因？我认为一个人航海家你想要做的是完全足够了。放一只导航仪中的父元素（在此codedirectory.html），并从他们的休息将其删除。从directory.html调用的页面也将获得该导航仪，所以没有必要创建新的。此外，一个附件导航仪应该始终有一个附件页里面，所以不要删除它，或者你会看错误：您不能提供无附件页元素ONS-导航。您可以在附件导航仪觉得作为一个框架是根据附件页 S中的变化，其内容你推什么/流行。你不需要在一个框架的框架，你呢？

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?

希望它帮助！