ons-navigator 一页模板中的多个导航器

Question

我正在尝试从 Onsen UI 框架创建一个应用程序。我正在使用多个导航器。在第一页（模板）中，它工作正常。对于其他页面，它会给出一定的错误。

这是我在 google chrome 控制台 Error: You can not supply no "ons-page" element to "ons-navigator".

上单击时出现的错误

这是我的页面模板的样子：

<!-- 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>

不能在同一页面中使用多个导航器吗？

我尝试使用以下方法解决同样的问题，但它有所帮助，但它从导航页面上取消了 ons-back-button。

<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>

我只是将标签放入 <ons-page> 中，它的工作非常棒，但似乎 <ons-back-button>Back</ons-back-button> 这之后就不起作用了。

任何其他方式。

Answer 1

您是否尝试过更改第二个导航器的关联变量名称？

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

变量可能有冲突。

Answer 2

您是否出于任何特定原因使用多个导航器？我认为您想要做的事情一个导航器就足够了。将一个导航器放在父元素中（此代码中的 "directory.html"），然后将其从其余元素中移除。您从 "directory.html" 调用的页面也可以访问该导航器，因此无需创建新的导航器。另外，一个 ons-navigator 应该总是有一个 ons-page 在里面，所以不要删除它，否则你会看到 Error: You can not supply no "ons-page" element to "ons-navigator"。您可以将 ons-navigator 视为一个 "frame"，其内容是 ons-page，根据您 push/pop 的内容而变化。你不需要框架内的框架，是吗？

希望对您有所帮助！

ons-navigator 一页模板中的多个导航器

ons-navigator Multiple Navigator in one page template

html

javascript

angularjs

cordova

onsen-ui